livewire / volt

Volt is an elegantly crafted functional API for Livewire.
https://livewire.laravel.com/docs/volt
MIT License
312 stars 19 forks source link

`wire:model` does not update the state or trigger rendering when combined with `->url()` #82

Closed osbre closed 7 months ago

osbre commented 7 months ago

Volt Version

1.6.0

Laravel Version

10.37.3

PHP Version

8.3.0

Database Driver & Version

SQLite (n\a)

Description

When I type anything into the search field that has wire:model, the list doesn't update and there are no requests sent according to the devtools network tab.

Source code of the component based on the documentation example: https://github.com/osbre/bug-report-volt-search/blob/6a50e5f38a55295a96ef2ef5ff78405bf20577a9/resources/views/livewire/users.blade.php#L1-L24

Steps To Reproduce

git clone git@github.com:osbre/bug-report-volt-search.git
cp .env.example .env
php artisan migrate --seed      # DB_CONNECTION will be set to SQLite, due to .env.example
php artisan key:generate
php artisan serve
open http://127.0.0.1:8000

Repository: https://github.com/osbre/bug-report-volt-search

egekibar commented 7 months ago
<?php

use App\Models\User;
use function Livewire\Volt\{computed, state};

state('search')->url();

$users = computed(function () {
    return User::where('name', 'like', '%' . $this->search . '%')->get();
});

?>

<div>
    <input wire:model.live="search" type="search" placeholder="Search users by name...">

    <h1>Search Results:</h1>

    <ul>
        @foreach($this->users as $user)
            <li wire:key="{{ $user->id }}">{{ $user->name }}</li>
        @endforeach
    </ul>
</div>

this code works for me

osbre commented 7 months ago

Thank you! So there was a missing .live after wire:model. Looks like a good opportunity to send a PR to the documentation.

https://github.com/livewire/livewire/pull/7549