Hello I'm new to Vuejs and have to learn it for my internship so please go easy on me if I say anything stupid. Im trying to make a search bar to search in an array of fruits but I keep getting the following error: TypeError: Cannot read properties of undefined (reading 'filter'). I have no idea what I'm doing wrong!
This is the script of my component:
data: {
query: '',
fruits: [
{ msg: 'appel'},
{ msg: 'peer'},
{ msg: 'aardbei'}
]
},
computed: {
filteredList: function () {
var vm = this
return this.fruits.filter(function (item) {
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
})
}
}
And this is my html code (in case it is relevant to the error but I dont think so):
<div>
<input type="text" v-model="query" placeholder="Search fruits..." />
<div class="item fruit" v-for="fruit in filteredList()" :key="item.msg">
<p>{{ item.msg }}</p>
</div>
<div class="item error" v-if="query&&!filteredList().length">
<p>No results found!</p>
</div>
</div>