Level 102
Be sure to have the vite script before the script where you try to use it
Jan 8, 2023
6
Level 2
Choices.js and vite
Trying to add Choices.js to my TALL app and I can't seem to get it working. I've added the following to my app.js
import Choices from 'choices.js';
window.Choices = Choices;
but when I try to call it in my blade with the following code,
select2 = new Choices($refs.select, {
position: 'bottom',
searchPlaceholderValue: '{{__('Search...')}}',
shouldSort: false,
itemSelectText: '',
})
I get
Uncaught ReferenceError: Choices is not defined
Level 2
Level 102
@aarontharker see if you can call it from the browser console. Just type Choices
Level 2
actually I'm not calling Choices in my script stack but in the x-init of a my component.
<div
x-data="{
model: @entangle($attributes->wire('model')),
}"
x-init="
select2 = new Choices($refs.select, {
position: 'bottom',
searchPlaceholderValue: '{{__('Search...')}}',
shouldSort: false,
itemSelectText: '',
})
$refs.select.addEventListener('change', (event)=>{
if (event.target.hasAttribute('multiple')){
model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
}else{
model = event.target.value;
}
});
"
wire:ignore
>
Level 102
@aarontharker then be sure you bind choices to window before you initialize alpine
2 likes
Level 2
@Sinnbeck Once again you have saved me :) That was the issue.
Please or to participate in this conversation.