Vuetify asyn c поиск отправляет только один символ за раз и не объединяет символы - PullRequest
0 голосов
/ 12 марта 2020

У меня есть следующий vue компонент:

<template>
    <v-form ref="form" @submit.prevent="search">
        <v-row class="pa-0">
            <v-col cols="12" md="2" class="d-flex">
                <v-autocomplete
                    :items="projects"
                    item-value="id"
                    :item-text="item =>  `${item.number.number} ${item.name}`"
                    outlined
                    v-model="form.project_id"
                    label="Project number"
                    :search-input.sync="project"
                    dense
                    hide-details="auto"
                    class="align-self-center"
                    clearable
                />
            </v-col>
         </v-row>
       </v-form>
</template>

<script>
export default {
   watch: {
      project( value )
            {
                this.queryProjects( { search: '', number: value } );
            }
   },

   data()
   {
        return {
            project: '',
            projects: [],
            }
        },

     methods: {
            async queryProjects( search )
            {
                console.log(search);
                if(!search)
                {
                    return;
                }

                let response = await fetch(route('projects.search', search));
                this.projects = await response.json();
            },
    }
}
</script>

Этот компонент должен фильтровать проекты по номеру проекта. Функция queryProject запущена, но проблема в value от наблюдателя project. После ввода каждого номера поле автозаполнения устанавливается обратно на null, поэтому оно не соответствует полному номеру проекта. Поэтому, если вы хотите найти 19320, каждое число анализируется один за другим, а не как целое число.

Когда набирается символ, вывод в консоли следующий:

  • 1 для значения наблюдателя
  • {number: "1"} для queryProject search значения
  • null для значения наблюдателя, поэтому каждый символ сбрасывает ввод или повторно отображает компонент .
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...