I have a vuejs application and I'm trying to filter an array based on an input from a form.
The problem is my array autocomplete isn't getting populated with the visitors that match the query of the first name.
My HTML
<input class="input" placeholder="First Name" v-model="visitor.first" @keyup.enter="searchVisitors">
My Vue Instance
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 can confirm the repsonse from the axios which is currently populating the previousVisitors array contains the firstName of each previous visitor.
What am I doing wrong?