CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
Enrique
Enrique

Reputation: 381

Vuetify update select input-value by prepend-item event

I'd like to update the select value by clicking the prepended item in a Vuetify select. But the model doesn't update the item-text in the select input.

<v-select
 :items="loadedTasks"
 v-model="selectedTask"
 item-text="text"
 item-value="value"
 return-object
 :menu-props="{closeOnContentClick: true}"
>
 <template v-slot:prepend-item>
   <v-list-item
    @click="selectedTask = {text:'none', value: 'none'}"
   >
    Text
   </v-list-item>
 </template>

Upvotes: 0

Views: 2064

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37903

If you are trying to add some "default" item to the select, the prepend-slot is no way to go as it cannot be "selected". It's better to just add your "default" item directly into the loadedTasks array

For example using computed:

computed: {
  tasksToSelect() {
    return [{text:'none', value: 'none'}, ...this.loadedTasks]
  }
}

...and use it like <v-select :items="tasksToSelect" />

Upvotes: 1

Related Questions