У меня есть следующий 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
для значения наблюдателя, поэтому каждый символ сбрасывает ввод или повторно отображает компонент .