Level 6
seems like you're using with() method inside the @foreach loop in your blade view. when validation fails, the error message is displayed for each friend's email input.
however, livewire does not support the use of the with() method for setting additional view data within a @foreach loop. instead, you should handle this logic within the livewire component itself.
this code as reference
use Livewire\Attributes\Rule;
class YourLivewireComponent extends Component
{
public array $friends = [''];
public function addFriend()
{
$this->friends[] = '';
}
public function removeFriend($index)
{
unset($this->friends[$index]);
$this->friends = array_values($this->friends);
}
public function updatedFriends()
{
$this->validate([
'friends.*' => Rule::email(),
]);
}
public function render()
{
return view('livewire.your-view');
}
}
@foreach($friends as $index => $friend)
<div class="relative">
<input type="text" id="friends" wire:model="friends.{{ $index }}"
placeholder="[email protected]"
class="w-full py-4 pl-6 pr-12 text-lg rounded-lg focus:ring-purple-600 focus:ring-2 focus:ring-offset-4 focus:ring-offset-gray-100 focus:outline-none"
autocomplete="off" />
<div class="absolute right-4 top-5">
<button class="ml-4 border-2 rounded-md hover:cursor-pointer border-slate-400 bg-slate-400/10 focus:ring-purple-600 focus:ring-2 focus:ring-offset-4 focus:ring-offset-white focus:outline-none"
wire:click="removeFriend({{ $index }})" aria-label="Remove friend">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div>@error('friends.' . $index) {{ $message }} @enderror</div>
</div>
@endforeach
