Блог

Я использую Vuetify v-autocomplete в своем проекте. Я могу искать и извлекать необходимую информацию из Api. Если у нас есть выделение, я хочу удалить выделение после того, как пользователь ввел один символ в область ввода для нового поиска.

После ввода одного символа выберите старое выделение и удалите его.

   <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 amp;amp; value.length >= 3) {
                try {
                    this.itemsAirportList = await this.$axios.$get(
                        `api-link/student-search?q=${value}`,
                     );
                 } catch (e) {
                    console.log(e)
                }
            }
        },    
    }
 

    if (this.studentInfosamp;amp; val amp;amp; val.length === 1) {
                this.studentInfos= ''
                setTimeout(() => {
                    this.searchStudents= val
                }, 100)
            }

 

здесь, если мы не используем setttimeout , он одновременно удалит наш первый символ. Итак, если я отправлю свой первый символ после удаления выделения, он сохранит значение первого символа thx для функции settimeout