I have a SelectField
Vue Single File Component which relies on Headless UI Listbox.
It receives current modelValue
as a prop and emits update:modelValue
event to update parent's state, as normal:
// Selectfield.vue
<script setup>
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from "@headlessui/vue";
...
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: [ Array, String ],
options: { type: Object }
...
</script>
<template>
<!-- Listbox -->
<Listbox as="div" :modelValue="modelValue" @update:modelValue="value => $emit('update:modelValue', value)">
...
</Listbox>
</template>
As you can see, options
list is another prop, dynamic from the outside.
I need to keep updated modelValue
value when options
change, but I do not know the standard way of doing this. Perhaps using a watcher
on options
? Or how could it be made?
Thanks in advance.