why selected value get disappeared in the v-autocomplete? - vue.js

Question

selected value get disappeared in the v-autocomplete. I've used vuetify v-autocomplete component for this. once I select a value and then when I click another component or when I continue the process that selected value get disappeared.
<v-autocomplete
:search-input.sync="search"
append-icon="mdi-chevron-down"
v-model="selectedCode"
item-text="name"
item-value="code"
class="my-input"
solo
:items="items"
label="select"
>
<template v-slot:no-data>
<v-list-item>
<v-list-item-content>
<v-list-item-title> Type to filter</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-autocomplete>
data() {
return {
search: null
};
},
watch: {
search(val) {
this.festchData({
search: val
});
}
},

Answer 1

in this scenario, I was able to solve this issue by checking a couple of values within the watch().
<v-autocomplete
return-object
:loading="isloading"
clearable
append-icon="mdi-chevron-down"
v-model.lazy="trans.code"
solo
:search-input.sync="search"
class="transaction-input"
:items="merchantList"
:disabled="displayText
"
item-text="name"
item-value="code"
:label="displayText"
:rules="[rules.required]"
>
</v-autocomplete>
watch: {
search(val) {
// if the search value is empty
if (val === undefined || val === null || val.length === 0) {
// make dataList empty
this.makeDataListEmpty();
this.isloading = false;
return;
}
// Items have already been loaded
if (this.dataList.length > 0) return;
// Items have already been requested
if (this.isloading) return;
this.isloading = true;
Promise.all([this.fetchData(val)]).finally(() => {
this.isloading = false;
});
}
},
the watch is listening to the actions and it gets triggered every time action gets executed. so we need to check whether we have to filter the data at a particular time or not.