Search code examples
laravel-livewire

How in volt class to update $form var of the component of parent blade file?

On laravel 11 site I created a volt class with command :

php artisan make:volt common/controls/input_text --class

and and edited file resources/views/livewire/common/controls/input_text.blade.php :

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $form = [];
    public string $formattedValue = '';
    public string $fieldName = '';
    public string $label = '';
    public ?string $placeholder = '';
    public ?int $maxlength = 0;
    public ?int $tabindex = 0;
};
?>

        <div class="w-4/12 pb-0 pl-2 md:pt-3 ">
            <label for="{{ $fieldName }}" >
                {{ $label }}:
            </label>
        </div>
        <div class="p-2 w-full">
            <input id="{{ $fieldName }}" name="{{ $fieldName }}" type="text"
                   class=""
                   @if(!empty($maxlength)) maxlength="{{ $maxlength }}" @endif
                   wire:model="form.{{ $fieldName }}"
                   autocomplete="off"
                   @if(!empty($placeholder)) placeholder="{{ $placeholder }}" @endif
                   @if(!empty($tabindex)) tabindex="{{ $tabindex }}" @endif/>
            @error('form.' . $fieldName)
            <span class="error_text">{{$message}}</span>
            @enderror
        </div>

and using this volt in parent blade file :

<livewire:common.controls.input_text fieldName="website" :form="$form" :maxlength="50" tabindex="20" placeholder="Fill your website url"/>

Component of parent blade file has $form var defined (which extends Form class) and used for data saving.

But when I edit value inside of this volt class $form var of the component of parent blade file is not filled with new value.

In which way have I to fill this $form var?

"laravel/framework": "^11.9",
"livewire/livewire": "^3.5",
"livewire/volt": "^1.6",

Thanks in advance!

and using this volt in parent blade file :

<livewire:common.controls.input_text fieldName="website" :form="$form" :maxlength="50" tabindex="20" placeholder="Fill your website url"/>

Component of parent blade file has $form var defined (which extends Form class) and used for data saving.

But when I edit value inside of this volt class $form var of the component of parent blade file is not filled with new value.

In which way have I to fill this $form var?

"laravel/framework": "^11.9",
"livewire/livewire": "^3.5",
"livewire/volt": "^1.6",

DETAILS WITH ERROR :

After I applyed change in file resources/views/livewire/common/controls/input_text.blade.php :

<?php

use Livewire\Volt\Component;
use Livewire\Attributes\Modelable;

new class extends Component {
    #[Modelable]
    public $form;
    public string $formattedValue = '';
    public string $fieldName = '';
    public string $label = '';
    public ?string $placeholder = '';
    public ?int $maxlength = 0;
    public ?int $tabindex = 0;
};
?>

<div class="editor_field_block_wrapper d2">

    <div class="editor_field_block_device_splitter">
        <div class="w-4/12 pb-0 pl-2 md:pt-3 ">
            <label for="{{ $fieldName }}" class="editor_field_block_device_label">
                {{ !empty($label) ? $label: \Str::ucfirst(\Str::replace('_', ' ', $fieldName)) }}:
            </label>
        </div>
        <div class="p-2 w-full">
            <input id="{{ $fieldName }}" name="{{ $fieldName }}" type="text"
                   class="editor_form_input"
                   @if(!empty($maxlength)) maxlength="{{ $maxlength }}" @endif
                   wire:model="form.{{ $fieldName }}"
                   autocomplete="off"
                   @if(!empty($placeholder)) placeholder="{{ $placeholder }}" @endif
                   @if(!empty($tabindex)) tabindex="{{ $tabindex }}" @endif/>
            @error('form.' . $fieldName)
            <span class="error_text">{{$message}}</span>
            @enderror
        </div>
    </div>
</div>

and changed calling in parent blade file as :

phone::{{ $form->phone }}
<livewire:common.controls.input_text fieldName="phone" wire:model="$form" :maxlength="100" tabindex="10" />

website::{{ $form->website }}
<livewire:common.controls.input_text fieldName="website" wire:model="$form" :maxlength="50" tabindex="20" placeholder="Fill your website url"/>

I see errer in console :

enter image description here and my page is broken at all. What can be wrong ?

Thanks in advance!

Solution

  • From Livewire documentation:

    In Livewire, every component on a page tracks its state and makes updates independently of other components.

    So, in your case you just pass initial value to child component and after that you have two different form instance: one in input_text component and the other one in your parent component.

    In order to have ability to change parent form value from child component you need to make your form value modelable.

    <?php

use Livewire\Attributes\Modelable;
use Livewire\Volt\Component;

/* your input component */
new class extends Component {
    #[Modelable]
    public $form;
    /* other properties */
};
?>

    And add this component to parent component with binding using wire:model

    <livewire:common.controls.input_text fieldName="website" wire:model="form" :maxlength="50" tabindex="20" placeholder="Fill your website url"/>

    For more information read this section in documentation about nesting.