Data binding works just on one direction

#1

Data can be reflected from the Livewire controller to the Livewire view but not the opposite way.

Laravel view:

<div class="card-body">
    <livewire:roles-form-create />
</div>

Livewire controller:

namespace App\Http\Livewire;

use Livewire\Component;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

class RolesFormCreate extends Component
{
    public $name;
    public $permissions;
    public $role_permissions;

    public function mount()
    {
        $this->name = "Sample Role";
        $this->permissions = Permission::all();
        $this->role_permissions = [];
    }

    public function render()
    {
        return view('livewire.roles-form-create');
    }
}

Livewire view:

<div class="form-group row {{ $errors->has('name') ? 'has-error' : '' }}">
        <label for="name" class="col-md-3 control-label">{{ trans('roles.name') }}</label>
        <input wire:model="name" class="form-control col-md-9" name="name" type="text" id="name" value="" minlength="1" maxlength="255" required="true" placeholder="{{ trans('roles.name__placeholder') }}">
        {!! $errors->first('name', '<p class="form-text text-muted">:message</p>') !!}
</div>
{{ $name }}

Browser console doesn’t show any errors.

Request payload: (the text “Role” was erased from the input)

{"id":"M4hqRPZ4dCgVZlXHsGiN","data":{"name":"Sample Role","permissions":{"class":"Spatie\\Permission\\Models\\Permission","id":[1,2,3,4,5,6,7,8,9,10],"relations":[],"connection":"mysql"},"role_permissions":[]},"name":"roles-form-create","checksum":"8c7015650cfc6f3c3afa6f56c19738c1fc4ff41c324b01aa95d198d187d033cf","locale":"es","children":[],"actionQueue":[{"type":"syncInput","payload":{"name":"name","value":"Sample"}}]}

{{ $name }} reflects the initial value setup for $name on the Livewire controller, but not the changes made directly on the input.

Assets were published using the command:

php artisan vendor:publish --tag=livewire:assets

Laravel version: ^7.0
Livewire version: ^1.3

#2

Hey @CBE,

you have to put the {{ $name }} inside the Components root div. Otherwise it won’t be updated by the DomDiffing. As far as i know Livewire behaves like VueJS in this case, so you have to have a single root element in your component.

I’ve copied and tested the code you posted and it works like it should when the {{ $name }} is within the div .

Hope this helps!

1 Like
#3

It works as you suggested. In fact the root of my Livewire view is a form element. Just beginning with the awesome Livewire. Thanks a lot for your help.

1 Like