Question:

How to watch for event changes on a tailwind listbox component with Vuejs?

Problem:

I'm using a listbox component from Tailwind. The official documentation showed an onChange event handler for react. I want to do something similar with vue.

I've tried adding the event handler to the Listbox component...the event never fires.

This is what my component looks like:

import { ref, onMounted } from 'vue'

import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from '@headlessui/vue'

import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'

const props = defineProps(['options', 'label', 'selected_option']);

function optionSearch(){

let selected = props.options.filter(option=>{

let index = option.id.toString().indexOf(props.selected_user)

return index > -1;

})

return ref(selected);

}

function getSelectedIndex(){

var x;

props.options.forEach(function(option, index){

if(option.id == props.selected_option){

x = index;

}

});

return x;

}

const selectedIndex = getSelectedIndex();

const selected = ref(props.options[selectedIndex]);

onMounted(()=>{});

function optionChanged(){

console.log('snap');

}

</script>

<ListboxLabel v-if="label" class="block text-sm font-medium leading-6 text-gray-900">Assigned to</ListboxLabel>

<span v-if="selected" class="block truncate">{{ selected.name }}</span>

<span v-else class="block truncate">Select</span>

</span>

</ListboxButton>

<ListboxOption as="template" value=""><li class="relative cursor-default select-none py-2 pl-3 pr-9"><span class="'block truncate">Select</span></li></ListboxOption>

<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">{{ option.name }}</span>

</span>

</li>

</ListboxOption>

</ListboxOptions>

</transition>

</div>

</Listbox>

</template>

Everything works fine when I use a simple select box.

<option>United States</option>

<option selected="">Canada</option>