One of the features I implemented in my project is using Vuetify's v-autocomplete component. It allows users to search for and retrieve necessary information from an API. However, I encountered a scenario where I needed to delete the selection after the user entered just one character into the input area for a new search.
The solution was to automatically clear the old selection once a new character is entered.
https://i.sstatic.net/rwARC.png
<v-autocomplete v-model="studentInfos"
:items="studentList"
:search-input.sync="searchStudents"
cache-items
return-object
:menu-props="{ auto: true, overflowY: true,maxWidth:'400px',width:'100%' }"
@change="$emit('studentInfos', studentInfos)">
//here is my selection area
<template v-slot:selection="{ item }">
<span class="d-inline-block text-truncate" style="max-width: 90%;">
<span class="text-no-wrap">
{{ item.Name + ' ' + item.Surname}}
</span>
</span>
</template>
<template v-slot:item="{ item }">
//here , api infos
</template>
</v-autocomplete>
watch: {
async searchStudents(val) {
if (value && value.length >= 3) {
try {
this.itemsAirportList = await this.$axios.$get(
`api-link/student-search?q=${value}`,
);
} catch (e) {
console.log(e)
}
}
},
}