2

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.

andcl
  • 3,342
  • 7
  • 33
  • 61

0 Answers0