How to make a combobox a reusable component in vue?

[StefanGhiban]

Hi! I was trying to create a combobox as a reusable component but I can't figure out how I should do it. As the combobox itself doesnt have an @change function, how should I be able to make it as a reusable component. How to make a combobox update the state of a parent element? Thak you.

[Eliophot]

Hello, you can use @update:modelValue in combobox for that, I think.

[StefanGhiban]

Yes, I have seen in a thread, but then, what do you pass up? The value itself is on the combobox option, not the main combo component. $event.target.value doesnt seem to work.

[Eliophot]

https://vuejs.org/guide/components/events.html#usage-with-v-model
I will try to make one...

[StefanGhiban]

Your example doesnt work, people.id would fail because people would be an array. And if the v-model is done like this, how would you change the v-model from the combobox to take into account this v-model? If you have a full working repo for this reusable combox box, please send it to me, as these small pieces do not make any sense to me, sorry.

[Eliophot]

in the component :

    props: {
        modelValue: {
            type: String,
            default: null,
        },
        data: {
            type: Object,
            default: null,
        },
    },
    emits: ["update:modelValue"],

in setup's component

    const selectedItem = ref(props.data[0]);

    props.data.forEach((item) => {
        if (item.id === props.modelValue) {
            selectedItem.value = item;
        }
    });

    onMounted(() => {
       getCurrentInstance().emit("update:modelValue", selectedItem.value.id);
    });

I think we can do better ^^

[Eliophot]

Your example doesnt work, people.id would fail because people would be an array. And if the v-model is done like this, how would you change the v-model from the combobox to take into account this v-model? If you have a full working repo for this reusable combox box, please send it to me, as these small pieces do not make any sense to me, sorry.

yes sorry to fast response ^^

[StefanGhiban]

Yea, it is a bit convoluted. If we would compare this approach to the one from the vue docs, this is harder to read. Clearly there is an issue in how these components are constructed as making them reusable is very hard in my opinion.

[StefanGhiban]

Your example doesnt work, people.id would fail because people would be an array. And if the v-model is done like this, how would you change the v-model from the combobox to take into account this v-model? If you have a full working repo for this reusable combox box, please send it to me, as these small pieces do not make any sense to me, sorry.

yes sorry to fast response ^^

no worries

[adamleemiller]

I know this is long overdue here but I am trying to write a custom component myself using Vue and finding this extremely difficult. I have gotten to the point where I can set the selected option as needed when clicked in the list and pass back the value to the parent component however now I am faced with another issue. I cannot for the life of me figure out how to set the default selected option. I have been at this for nearly 4 hours now and could use some guidance / help if anyone is available and has the time. Here's the current code: https://pb.farmflight.us/?6fbabf05594f72f9#C1EobuqQHPmx5WFJVN4sXw9Y2QauCZxjatvfvrKXgfuC - If you would like a video of what I am referring to, please let me know. Thank you!