Laravel livewire property nested binding not showing the value in the form field

Question

I have a livewire component for showing profile information. In my form, I'm binding the value to the wire:model as nested data. but it's not showing the value in the textbox.

component

<?php

namespace App\Http\Livewire\Profile;

use Livewire\Component;

class BasicInfo extends Component
{
    public $user;

    public function mount()
    {
        $this->user = auth()->user();

    }
    
    public function render()
    {
        return view('livewire.profile.basic-info');
    }
}

blade file

<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>{{ __('Profile Information') }}</h1>
        </div>
        <div class="col-6">
            <form>
                <div class="form-group row">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" wire:model="user.name" class="form-control" disabled>
                </div>

                <div class="form-group row">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="text" wire:model="user.phone" class="form-control" disabled>
                </div>

                <div class="form-group row">
                    <label for="location" class="form-label">Location</label>
                    <input type="text" wire:model="user.location.name" class="form-control" disabled>
                </div>
            </form>
        </div>
    </div>
</div>

when I do dd($user) in the blade file it returning the user object properly.

when I directly assign the value to public property in component and reference it in the blade it is also working.

Laravel: 8.x Livewire: 2.2

Answer 1

To use wire:model Eloquent property binding, you will need to use the $rules property on your component:

protected $rules = [
    'user.name' => 'required',
    'user.phone' => 'required',
];

This array sets up default validation rules for fields on your component, and acts as a whitelist for which properties can be bound to.

With regards to your user.location.name, Livewire currently doesn't support nesting related model fields like that. You'll need to mount that location into another property on your model and bind to that.