John Davidson

Message:

Ive problems using livewire. All works fine, but when I type the input, data refresh and dissapear data from views/livewire/filtro.
When I click on url, data comes well.
Ive to refresh url to view data.
Ive tried displya blade without Front Controller, clear cache, clear routes

Http/Livewire/Filtro

use Livewire\WithPagination;



class Filtro extends Component

{



use WithPagination;



protected $paginationTheme = 'bootstrap';



protected $queryString = ['marca'];

public $marca;



public function render()

{

    return view('livewire.filtro', [

        'productos' => Producto::where('deleted',0)

                            ->where('marca', 'like', '%'.$this->marca.'%' )->paginate(20)

    ]);

}

}

routes/web

<?php



use Illuminate\Support\Facades\Route;



/*

Web Routes

--------------------------------------------------------------------------

*/



// Localized

Route::localized(function () {



Route::get('/anuncios', function () {

return view('front.anuncios');

});



Route::get('/', function () {

return view('front.index');

});



Route::get('/index', [App\Http\Controllers\FrontController::class, 'index'])->name('front.index');



});



Auth::routes();





Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');



Route::fallback(\CodeZero\LocalizedRoutes\Controller\FallbackController::class)

->middleware(\CodeZero\LocalizedRoutes\Middleware\SetLocale::class);

views/livewire/filtro

    <div class="listing__text__top">

        <div class="listing__text__top__left">

            <h5>Todoterrenos</h5>

            <span>{{ $productos->count() }} Resultados</span>

            <input type="text"  class="form-control" placeholder="Search" wire:model.debounce.1000ms="marca" />

            <div wire:loading>

    Processing ...

            </div>

            <div wire:offline>

You are now offline.

        </div>

        <div class="listing__text__top__right">Ordenar <i class="fa fa-sort-amount-asc"></i></div>

    </div>

@if($productos->count()) @foreach($productos as $producto)

                  @if($producto->garantizado === 'Si')

                    <div class="listing__item__text__info__right pr-3">Garantizado</div>

                  @endif



            <div class="">



            <a href="{{ route('front.detalle', $producto->titulo_slug) }}"><img src="{{ asset('img/productos/'.$producto->imagen_1)}}" height="150" alt="..." class="rounded float-left pr-2"></a>

            </div>

            <div class="listing__item__text">

                <div class="listing__item__text__inside ">

                    <h5><a href="{{ route('front.detalle', $producto->titulo_slug) }}">{{ $producto->titulo }}</a></h5>



                    <div class="listing__item__text__rating">

                       

                        <span>{{ number_format($producto->km,0,',','.') }} km</span>



                        <h6>{{ number_format($producto->precio_contado,0,',','.' ) }} &euro;</h6>

                    </div>

                    <ul>

                       

                        <li><i class="fa fa-map-marker"></i> {{ $producto->municipio }}, {{ $producto->municipio_slug }}</li>

                       

                    </ul>

                </div>   

            </div>

        </div>

@endforeach

@else



No hay productos



@endif



{{ $productos->links() }}

App/Http/Comtrollers/FrontController

namespace App\Http\Controllers;



use App\Models\Front;

use Illuminate\Http\Request;



use Illuminate\Support\Facades\DB;



use App\Models\Producto;

use App\Models\Link;

use Illuminate\Support\Facades\Session;



use App;



class FrontController extends Controller

{

/**

* Display a listing of the resource.

*

* @return \Illuminate\Http\Response

*/



 public function anuncios()

{

    return view('front.anuncios');

}



 public function index()

{

    return view('front.index');

}







public function detalle($titulo_slug)

{



 //   dd($titulo_slug);



  if($titulo_slug !='index' && $titulo_slug !='blog'){



    $producto = Producto::where('titulo_slug',$titulo_slug)

                            ->first();



    $num = $producto->visitas;



      $num ++;



      $producto->visitas = $num ;



      $producto->save();                        





    return view('front.detalle')->with('producto',$producto);

                            }

                            

}



public function locale($lang)

{

       App::setlocale($lang);



        session(['locale' => $lang]);

    

    return view('front.index');

}



/**

 * Show the form for creating a new resource.

 *

 * @return \Illuminate\Http\Response

 */

public function create()

{

    //

}



/**

 * Remove the specified resource from storage.

 *

 * @param  \App\Models\Front  $front

 * @return \Illuminate\Http\Response

 */

public function destroy(Front $front)

{

    // 

}

}

---

My Answer:
It seems like the issue you are facing is related to Livewire not updating the data in real-time when typing in the input field. This could be due to the way Livewire handles data binding and updates.

One thing you can try is to add a `wire:keydown` event listener to the input field to trigger an update on each key press. This way, the data will be updated in real-time as you type.

Here's an example of how you can modify your input field in the `livewire/filtro` view:

html



And then add a method in your `Filtro` Livewire component to handle the keydown event and update the data:

php
public function updateMarca()
{
$this->emit('inputUpdated');
}


Additionally, you can listen for the `inputUpdated` event in your Livewire component and re-render the view:

html

Processing ...

You are now offline.

@livewire('filtro', key(time()))

@if($productos->count())
@foreach($productos as $producto)

@endforeach
@else
No hay productos
@endif

{{ $productos->links() }}


By adding the `key(time())` to the Livewire component, you force Livewire to re-render the component on each key press, updating the data in real-time.

I hope this helps resolve the issue you are facing with Livewire not updating the data in real-time when typing in the input field. Let me know if you need further assistance.