Your issue is not clear; what is the displayed data if not the results of your query (constrained by the search text)?
Jan 8, 2025
5
Level 28
why livewire refresh full page when property updated
Hi, I have a SearchShop livewire component that shows the store at the entered address. But it refreshes the whole page when the entered data is validated and the property results are updated, so I lose the displayed data. how can I make it so that only part of the component with results are updated?
<?php
namespace App\Livewire;
use App\Models\ShopDeliveryAddresses;
use Livewire\Attributes\Validate;
use Livewire\Component;
class SearchShop extends Component
{
#[Validate('required|min:2')]
public $searchText = '';
public $results = [];
public function updatedSearchText($value)
{
$this->results = [];
$this->validate();
$this->results = ShopDeliveryAddresses::search($this->searchText)->where('city_id', 1)->get();
}
public function clear()
{
$this->reset('results', 'searchText');
}
}
<div class= "mt-4 md:mx-4 w-full">
<div class="relative">
<form class="flex justify-center">
<div class="relative mx-4 md:mx-0 w-full">
<input class="p-4 border border-lime-500 w-full rounded-full focus:outline-none focus:ring focus:ring-lime-300 "
wire:model.live.debounce.800="searchText"
placeholder="начните с поиска вашего адреса..." />
</div>
</form>
@if (!empty($searchText))
<div class="flex justify-start absolute w-full">
<div class="mx-4 md:mx-0 w-full mb-3">
{{-- <livewire:search-result :results="$results"> --}}
@foreach ($results as $address)
<div wire:key="{{ $address->id }}" class="text-start bg-white shadow-lg rounded-b-md py-3 md:flex justify-between w-full border-b" >
<a wire:navigate href="/shops/{{ $address->shop->id }}" class="w-full">
<div class="flex justify-between px-4">
<div class="font-semibold flex mx-1">
{{ $address->shop->name }}
</div>
</div>
</a>
</div>
@endforeach
@if (count($results) == 0)
<p>No results found</p>
@endif
</div>
</div>
@endif
</div>
</div>
Level 104
@Dosmukhanbet if the search term is passed a query parameter, then you can persist the term across page refreshes https://livewire.laravel.com/docs/url
1 like
Please or to participate in this conversation.