What seems to be the problem: Initial selected options doesn’t show up dynamically
Steps to Reproduce: use the code below
Are you using the latest version of Livewire: yes
Do you have any screenshots or code examples:
Choice.js custom component:
<div x-data x-init="() => {
var choices = new Choices($refs.{{ $attributes['prettyname'] }}, {
itemSelectText: '',
removeItems: true,
removeItemButton: true,
});
choices.passedElement.element.addEventListener(
'change',
function(event) {
values = getSelectValues($refs.{{ $attributes['prettyname'] }});
@this.set('{{ $attributes['wire:model'] }}', values);
},
false,
);
console.log({!! $attributes['selected'] !!});
items = {!! $attributes['selected'] !!};
if(Array.isArray(items)){
items.forEach(function(select) {
choices.setChoiceByValue((select).toString());
});
}
}
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
">
<select id="{{ $attributes['prettyname'] }}" wire-model="{{ $attributes['wire:model'] }}" wire:change=". {{ $attributes['wire:change'] }}" x-ref="{{ $attributes['prettyname'] }}" multiple="multiple">
@if(count($attributes['options'])>0)
@foreach($attributes['options'] as $key=>$option)
<option value="{{$key}}">{{$option}}</option>
@endforeach
@endif
</select>
</div>
Include js and css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.css" integrity="sha512-ZBZn3m8/9BsOpNilGuyxqCm4HwmfC40NR0e6PZxlRgFjNgV+mh0kyaknULcuBoToULdv8zHHcnrT1e6tesoD7Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
Variables:
$geos = ['DE','US'];
$options= ['DE', 'US', 'GB'];
In the view:
@php
$selected = stripslashes(json_encode($geos));
@endphp
<div x-data wire:ignore key="cr_classes_id_key" class="mb-6">
<x-select wire:model="geos" prettyname="modelprettyname" :options="$options" :selected="$selected" id="geos" />
</div>
This is working but now when i load dynamically the options by changing the “$geos” variable. I want an edtit function where the input is already filled. It’s like the input is not reactive.
This component is based on this post: Select and Select Multi