Input Value not working with Livewire wire:model

Question

What I am trying to do is getting some data from DB and showing it in Input Value fields but here the problem is that when I use wire:model='some_input_name' the value does not show up. And if I remove the wire:model it shows the value

the code:

<div class="form-group">
    <label for="site_name">Site Name</label>
    <input wire:model='site_name' type="text" name="site_name" id="site_name"
          class="form-control"
          placeholder="Site Name" value="{{$settings->site_name}}">
    </div>

Is there anything wrong here?? What is the correct way to show value while binding the input field with livewire component?

Put the value of the `$site_name` property equal to `$settings->site_name` in the component class, not the view. — Qirel, Sep 24 '20 at 08:25

score 10 · Accepted Answer · answered Sep 24 '20 at 08:49

10

Remove value="{{ $settings->site_name }}" from your <input>, and use the following code in your component's mount() method:

$this->site_name = $settings->site_name;

This will preserve the two-way data binding, whilst letting you set an initial value.

answered Sep 24 '20 at 08:49

Dan Harrin

889
6
17

score 2 · Answer 2 · answered Feb 16 '21 at 23:58

2

The best way to achieve this is to set an array of rules in your component, such as

$rules = [
 'settings.site_name' => 'required'
];

This validates you field values and allows them to be displayed. Futher reading is here in the livewire docs.

answered Feb 16 '21 at 23:58

damask

529
4
17

Input Value not working with Livewire wire:model

2 Answers2