VueJS TypeError：无法读取未定义的属性（读取'toLowerCase'）

Question

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: {
  }
})

Answer 1

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' })