Currently, I am working on a Vue.js application where my goal is to filter an array based on user input from a form.
The issue I am facing is that the array named autocomplete is not being populated with visitors that match the query of the first name.
This is a snippet of my HTML code:
<input class="input" placeholder="First Name" v-model="visitor.first" @keyup.enter="searchVisitors">
And here is my Vue Instance code:
new Vue({
el: '#app',
data: {
previousVisitors: [],
autocomplete: [],
visitor: {}
},
mounted() {
axios.get('/visitors/all').then(response => this.previousVisitors = response.data);
},
methods: {
searchVisitors(){
var q = this.visitor.first;
this.autocomplete = this.previousVisitors.filter(item => {return item.firstName === q});
console.log(this.autocomplete);
}
}
});
I have verified that the response from the axios call, which populates the previousVisitors array, contains the firstName of each previous visitor.
What could be the mistake in my implementation?