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

Question

我可以过滤一个数组，然后从这个数组中删除项目。 当我尝试将项目添加到此数组列表时，我的问题就开始了。 我收到以下错误：TypeError: Cannot read properties of undefined (reading 'toLowerCase')。 我不确定为什么会出现此错误，因为当我使用 add 突变时，我不希望使用我用于过滤突变的 getter。 有人可以向我解释这个错误的含义以及如何解决它吗？

这是我的组件代码：

<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>

这是我的商店文件中的代码：

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

看看你最初的果实 state：

fruits: [
          { msg: 'Monstera'},
          { msg: 'Aloe vera'},
          { msg: 'Bonsai'},
          { msg: 'Cactus'},
          { msg: 'Bananenplant'},
          { msg: 'Ficus'},
          { msg: 'Calathea'},
        ]

然后在向这个数组中添加新水果的方式：

state.fruits.push('Banana')

你最终会得到类似的东西：

fruits: [
          { msg: 'Monstera'},
          { msg: 'Aloe vera'},
          { msg: 'Bonsai'},
          { msg: 'Cactus'},
          { msg: 'Bananenplant'},
          { msg: 'Ficus'},
          { msg: 'Calathea'},
          'Banana',
        ]

要解决此问题，请将您的addPlants更新为state.fruits.push({ msg: 'Banana' })