Hi all, i’m in the process of moving some vue functionality to livewire. We use some vue custom input components throughout the app. One of these components uses the vue-select plugin/component. Since I can’t change the app all in 1 go to livewire, I’ve been trying to use this vue-select component with livewire. Just to make it clear what’s happening, I’ve even wrapped the vue-select component into my own input component.
This is the custom input component called livewire-select.
<template>
<vue-select :options="options" placeholder="Role" @input="handle" autocomplete="off" style="width: 350px;"></vue-select>
</template>
<script>
import VueSelect from 'vue-select';
export default {
components: { VueSelect },
props: {
options : {
type: Array,
default: () => (['Foo', 'Bar'])
}
},
methods: {
handle(value) {
this.$emit('input', value);
}
}
}
</script>
And on the livewire side:
<livewire-select class="my-4" wire:model="foo"></livewire-select>
Unfortunately this doesn’t work. The input event is fired. But I never see the changes reflected on the livewire side. If I replace the vue-select component (inside the livewire-select vue component) to a normal select/option, it works fine. I also tried wire:input as a listener.
Anyone know if something like the above is even possible? And if so, what am I missing?