I can filter in a array and I delete items from this array. My problem starts when I try to add items to this array list. I get the following error: TypeError: Cannot read properties of undefined (reading ‘toLowerCase’). I am not sure why I get this error, because when I use the add mutation I dont want the getter I used for my my filter mutation to even be used. Can someone explain to my what this error means and how I can fix it?
This is my component code:
<template>
<div id="app">
<div>
<input type="text" v-model="query" placeholder="Search plants..." />
<div class="item fruit" v-for="fruit in filteredList" :key="fruit.msg">
<p>{{ fruit.msg }}</p>
<button @click="deletePlants(index)">
Delete task
</button>
</div>
</div>
<div class="item error" v-if="query && !filteredList.length">
<p>No results found!</p>
</div>
<input v-model="fruits">
<button @click="addPlants">
New plant
</button>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
export default {
name: 'SearchComponent',
props: {
msg: String
},
computed: {
...mapGetters([
'filteredList'
// ...
]),
query: {
set (value) {
this.setQuery(value);
},
get () {
return this.$store.state.query;
}
}
},
methods: {
...mapMutations([
'setQuery',
'addPlants',
'deletePlants',
'setPlants'
]),
}
};
</script>
<style>
And this is the code in my store file:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
strict: true,
state: {
query: '',
fruits: [
{ msg: 'Monstera'},
{ msg: 'Aloe vera'},
{ msg: 'Bonsai'},
{ msg: 'Cactus'},
{ msg: 'Bananenplant'},
{ msg: 'Ficus'},
{ msg: 'Calathea'},
]
},
mutations: {
setQuery(state, value ) {
state.query = value;
},
addPlants(state) {
state.fruits.push('Banana')
},
deletePlants (state, index){
state.fruits.splice(index, 1);
},
},
getters: {
filteredList (state) {
return state.fruits.filter((item) => {
return item.msg.toLowerCase().indexOf(state.query.toLowerCase()) !== -1
})
}
},
actions: {
},
modules: {
}
})
>Solution :
Look at your initial fruits state:
fruits: [
{ msg: 'Monstera'},
{ msg: 'Aloe vera'},
{ msg: 'Bonsai'},
{ msg: 'Cactus'},
{ msg: 'Bananenplant'},
{ msg: 'Ficus'},
{ msg: 'Calathea'},
]
Then at the way you add new fruits to this array:
state.fruits.push('Banana')
You will eventually end up with something like:
fruits: [
{ msg: 'Monstera'},
{ msg: 'Aloe vera'},
{ msg: 'Bonsai'},
{ msg: 'Cactus'},
{ msg: 'Bananenplant'},
{ msg: 'Ficus'},
{ msg: 'Calathea'},
'Banana',
]
To fix this, update your addPlants to state.fruits.push({ msg: 'Banana' })