Vue.js点击CheckList组件按钮删除数组对象失败，提示remove方法未定义

• 你的remove方法定义在父组件Example.vue中，子组件CheckList.vue内部既没有声明该方法，也没有通过自定义事件接收父组件的方法传递，所以子组件调用时直接报错找不到该方法
• 父组件Example.vue里的remove方法存在逻辑错误，你操作的是不存在的this.events数组，实际要操作的是存储列表数据的this.items数组
• 直接传递过滤后数组的循环索引会出现匹配错误，doneItems、notDoneItems都是原数组过滤后的新数组，循环索引和原items数组的索引不对应，删除会错位

1. 修改CheckList.vue（子组件） #

子组件不直接操作父组件数据，通过$emit触发自定义事件，把要删除的项的唯一key传给父组件即可：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="(item,key) in items" :key="item.key">
        <input type="checkbox" v-model="item.done">
        {{item.name}}
        <!-- 把原来的remove调用改成触发自定义事件，传递当前项的key -->
        <button v-if="all" v-on:click="$emit('remove', item.key)" class="button1">remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CheckList",
  props: ['items', 'title', 'all']
}
</script>

2. 修改Example.vue（父组件） #

先给CheckList组件绑定自定义remove事件，再修正remove方法的逻辑：

<template>
  <div>
    <input type="text" v-model="message" @keyup.enter="add">
    <button @click="add">Add Item</button>
    <!-- 绑定remove事件，关联父组件的remove方法，all属性显式传布尔值更规范 -->
    <CheckList :items="items" :all="true" title="All Items" @remove="remove"></CheckList>
    <CheckList :items="doneItems" :all="false" title="Done Items"></CheckList>
    <CheckList :items="notDoneItems" :all="false" title="Not Done Items"></CheckList>
  </div>
</template>

<script>
import CheckList from "./CheckList";
export default {
  name: "Example",
  components: {CheckList},
  data() {
    return {
      message: '',
      items: [
        {name:'Apple', done: true, key: 0},
        {name:'Orange', done: false, key: 1},
        {name:'Grapes', done: true, key: 2},
      ],
    }
  },
  methods: {
    add(){
      if(this.message !== '') {
        this.items.push({
          name: this.message,
          done: false,
          key: this.items.length
        });
        this.message = '';
      }
    },
    // 修正remove方法，根据传过来的key匹配原数组的项删除
    remove(key){
      const targetIndex = this.items.findIndex(item => item.key === key)
      if(targetIndex > -1) {
        this.items.splice(targetIndex, 1)
      }
    }
  },
  computed: {
    doneItems(){
      return this.items.filter(item => item.done);
    },
    notDoneItems(){
      return this.items.filter(item => !item.done);
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Pleinair