[Vuejs]-Set selected data for selectors and events selectors change in for loop vuejs

by

0👍

✅

If you want to trigger something when the selected option changes, then you can do that with a watcher:

setup() {
    const options = [ ... ];

    const selectedOption = Vue.ref({ ... });

    Vue.watch(selectedOption, () => {
        // selectedOption changed
    });

    return {
        options,
        selectedOption
    };
}

If you want to customize the VSelect like you have in your first example, then you can replace the option component. But I believe Vuetify handles the active state already, so unless you need a specific design, you don’t need to touch it.

<v-select v-model="selectedOption" :items="options" item-title="state" item-value="abbr" label="Select" return-object single-line>
    <template #item="{ item, props }">
        <v-list-item v-bind="{ ...props, title: undefined }">
            {{ item.value.abbr === selectedOption.abbr ? 'selected' : '' }} {{ item.title }}
        </v-list-item>
    </template>
</v-select>

Leave a comment