Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

anselmpaul's avatar

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!

0 likes
1 reply
anselmpaul's avatar

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.

Please or to participate in this conversation.