The following code snippet shows how to set initial default value for vuetify v-autocomplete component. The same would work also for v-combobox component.
To set the initial value, the v-model needs to be set to the initial item, and the item needs to be present in items array.
<v-autocomplete
v-model="selectedItem"
:items="items"
:search-input.sync="searchQ"
item-text="name" item-value="id"
/>
data() {
return {
selectedItem: {id:1, name: "My selected item"},
searchQ: null,
items: [{id:1, name: "Selected Topic", subject:{name: "polity"}}],
}
},
methods: {
query(val){ //do backend query here }
},
watch: {
searchQ (val) {
if(val && val.length > 2 && val != this.selectedItem?.name) this.query(val)
}
}
Its just an example, the actual selectedItem may be an object from vuex store.
When the initial value is set, vuetify will fire search-input
event. To prevent querying the backend when default value is