Laravel livewire: update text field based on first field value-CodePudding

I'm struggling to understand how livewire works.

I have two text fields. One is where the user enters information like prefixes and the second field with a read-only attribute where data will be displayed based on the first field value. But for some reason, I can't populate the second field. All examples on the internet are how to take a value and return it back or generate a dropdown menu.

my blade template:

<div >
     <label for="exampleFormControlInput1" >prefix</label>
     <input  wire:change="testing"
             type="text"
             
             id="prefix"
             name="prefix"
     />
 </div>
 <div >
     <label for="exampleFormControlInput1" >Code</label>
     <input  wire:model="part"
             type="text"
             
             id="part"
             name="part"
             value="{{ $part }}"
     />
 </div>

and Livewire class:

class DoSomethingClass extends Component
{
    public $prefix;
    public $part;


    public function testing()
    {

        $this->part = $this->prefix;
    }

    public function render()
    {
        return view('livewire.blade-template');
    }
}

CodePudding user response：

You should use wire:model to both input fields. Than, if you want to update the 2nd field on the input of the first, you can use the Livewire Lifecycle to update it.

    public $prefix;

    public $part;

    public function updatedPrefix()
    {
        $this->part = $this->prefix;
    }

Check this link for info on the updatedPrefix() hook: https://laravel-livewire.com/docs/2.x/lifecycle-hooks

(You can choose to use your testing() method too, but than you still need to use the wire:model directive to your second input.)

CodePudding user response：

You can make what you're doing work just by adding wire:model="prefix" to your first input as suggested above.

<div >
    <label for="exampleFormControlInput1" >prefix</label>
    <input  wire:change="testing"
            type="text"
            
            id="prefix"
            name="prefix"
            wire:model="prefix"
    />
</div>
<div >
    <label for="exampleFormControlInput1" >Code</label>
    <input  wire:model="part"
            type="text"
            
            id="part"
            name="part"
            value="{{ $part }}"
    />
</div>

And the component itself can just stay the same. When someone types anything in the first field then tabs or clicks away it will update the second field.

If you want the second field to update as the user types change it to wire:keydown="testing", it will make a call with every keystroke.

<div >
    <label for="exampleFormControlInput1" >prefix</label>
    <input  wire:keydown="testing"
            type="text"
            
            id="prefix"
            name="prefix"
            wire:model="prefix"
    />
</div>
<div >
    <label for="exampleFormControlInput1" >Code</label>
    <input  wire:model="part"
            type="text"
            
            id="part"
            name="part"
            value="{{ $part }}"
    />
</div>

As mentioned above, if you use the updatedPrefix() method you won't need the wire:change or wire:keydown as Livewire will update the field as the user types.