Livewire blade reusable component-CodePudding

I have created a layout template using blade and then I implement that one in order to reuse a common component, but when it renders first it takes the first component value.

So, when I change my implementation in a single file it works, as it should

layouts/input-base.blade.php

<div>
  input example
  @yield('input')
</div>

text-input.blade.php

@extends('layouts.input-base')
<div>
  {{$value}}
  <input :wire:model="value">
</div>

main.blade.php

<livewire:text-input :value="$user->name" model="name"/> // All compoents render this value
<livewire:text-input :value="$user->age" model="age"/>
<livewire:text-input :value="$user->info" model="info"/>

CodePudding user response：

You just need to assign keys to your livewire components example:

<livewire:text-input :value="$user->name" model="name" :wire:key="user_name">
<livewire:text-input :value="$user->age" model="age" :wire:key="user_age">
<livewire:text-input :value="$user->info" model="info" :wire:key="user_info">

Read more on nesting livewire components from: https://laravel-livewire.com/docs/2.x/nesting-components#introduction

Please keep in mind that:

Livewire components should NOT be used for extracting Blade snippets into separate files. For these cases, Blade includes or components are preferable.