In my Vue component, I have the following code:
<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>
This Vue component is designed to filter projects based on their project numbers. However, there seems to be an issue with the value passed from the project watcher. Each time a new number is entered in the autocomplete field, it resets back to null instead of concatenating the complete project number. For example, entering "19320" would result in each character being treated individually rather than as a whole number.
When a character is typed, the output in the console shows:
1for the watcher value{number: "1"}for thequeryProjectsearchvaluenullfor the watcher value, indicating that each character input causes the input to reset or the component to rerender.