Figured it out. I was using a Blade component instead of Livewire Components. Then I followed the livewire docs on binding props to child components and now it works like a charm.
Apr 24, 2024
1
Level 1
Select component using JS library not updating model attributes
Hi, I'm trying to implement a Livewire MultiSelect component using the JS library Choices.js. I've got Choices set up sucessfully but I can't get it wired with my model. This is my MultiSelectComponent:
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class MultiSelect extends Component
{
public function __construct(
public array $options,
public string $model,
) {}
public function render(): View|Closure|string
{
return view('components.multi-select');
}
}
And its blade view:
<div>
<select multiple="multiple" class="rounded focus:ring-0 focus:ring-offset-0"
x-data="{ initChoices: function() { choices($el); } }"
x-init="initChoices"
wire:model="{{$model}}">
@foreach($options as $option)
<option value="{{ $option['id'] }}">{{ $option['name'] }}</option>
@endforeach
</select>
</div>
This is being used in my Form Component, simplified:
class Form extends Component {
public array $languages;
public array $courses;
...
}
which uses the MultiSelect in its view:
...
<label for="course_languages" class="block text-sm font-medium leading-6 text-gray-900">Languages</label>
<x-multi-select :options="$allLanguages->toArray()" id="course_languages" :model="'languages'"/>
...
I can select languages in the UI with the Choices Select, but the $languages field is not populated with the values. There's also no update Request in the network tab. How do I correctly connect my component with the model?
Thanks!
Please or to participate in this conversation.