Level 63
You are probably using Livewire 3.
In the new version, you have to add .live to live update the property.
<input wire:model.live="test" type="text" />
11 likes
Sep 21, 2023
8
Level 4
Livewire problem.. wire:model not updating.
Hi.. I'm having some trouble with livewire. This very basic component is not updating at all:
Template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
@livewireStyles
</head>
<body>
<livewire:test />
@livewireScripts
</body>
</html>
Component controller:
<?php
namespace App\Livewire;
use Livewire\Component;
class Test extends Component
{
protected $debug = true;
public $test = 'blablabla';
public function render()
{
return view('livewire.test');
}
}
Component view:
<div>
<input wire:model="test" type="text" />
output: {{ $test }}
</div>
On initial page laod the field is filled in with the 'blablabla'. That's okay. But when I change the text nothing happens. What am I missing?
This is the resulting source code of the page, so you can see livewire is loaded correctly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<!-- Livewire Styles --><style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}[x-cloak] {display: none;}</style>
</head>
<body>
<div wire:snapshot="{"data":{"test":"blablabla"},"memo":{"id":"OaTud2gQpFWGvA13ISLW","name":"test","path":"admin","method":"GET","children":[],"errors":[],"locale":"en"},"checksum":"3f5e0e7bfccbdc56cb92518bb96db49b7a652464cf4311d5318d7340dc360912"}" wire:effects="[]" wire:id="OaTud2gQpFWGvA13ISLW">
<input wire:model="test" type="text" />
output: blablabla
</div>
<!-- Livewire Scripts -->
<script src="/livewire/livewire.js?id=f41737f6" data-csrf="faEKc24avFbBLucGZbnW7Jr5hGxLk7HDizm8Z84R" data-uri="/livewire/update" data-navigate-once="true"></script>
</body>
</html>
Please help
Level 4
@vincent15000 Thanks Vincent! I missed that. It's pretty clear in the docs but I guess I just skipped that. :)
1 like
Level 63
@tvbz If you have solved your problem, please close the post.
Level 1
@vincent15000 for me this didnt help. I am starting from the boilerplate livewire 3 app and it looks like the model change triggers a re-render after which the changed model content is being showed (the standard Welcome component). I am adjusting the original source code to fit my requirement but i cant get the UI to re-render after i typed something into the input field. Hooking into updating() and logging a messge also shows no reaction of the system (no message being written out). A good idea may be utilizing OpenTelemetry so i dont have to clutter log messages all over the place.
1 like
Level 63
@baumgars This didn't help you, but this is the solution.
That means that you have another problem in your code.
Show your code ... otherwise it's impossible to help you.
Level 122
@baumgars install laravel debugbar. This will increment a request counter each time a livewire update occurs, and also allow you to evaluate the state of all livewire public properties.
If you have wire:model.live and nothing happens when you change the field, then maybe you don't have livewire working. Do you have a separate header line to install Apline.js ? (you shouldn't have)
1 like
Level 1
@vincent15000 indeed it was a completely unrelated issue. My developer console showed me an error which led me the way to the solution.
Please or to participate in this conversation.