Vue报错Property or method "isCompleted"未定义，点击切换任务完成状态如何解决？

问题原因 #

• 你在v-for循环内直接调用isCompleted，但该属性是tasks数组中每个任务对象的私有属性，没有定义在组件根实例的data根级别，渲染时实例找不到对应属性就会抛出该错误。
• 原checkCompleted方法直接操作this.isCompleted，同样是访问了不存在的根实例属性，且没有关联到你当前点击的对应任务。

修正方案 #

1. 模板中所有isCompleted的引用都要关联到循环对应的task对象，点击事件要把当前任务作为参数传入方法
2. 修改checkCompleted方法，接收任务对象参数，直接反转该对象的isCompleted取值即可，不需要冗余的三元判断

修正后完整代码 #

<template>
  <div class="container tasks">
    <div class="card" v-for="(task, index) in tasks" :key="index">
      <div class="card-content">
        <div class="card-title">
          <h4>{{ task.title }}</h4>
        </div>
        <p>{{ task.description }}</p>
        <button
          class="btn-small green"
          @click="checkCompleted(task)"
          v-if="!task.isCompleted"
        >
          标记完成
        </button>
        <div class="btn red" v-else @click="checkCompleted(task)">未完成</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      tasks: [
        {
          title: "读书",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "洗碗",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "玩Fifa",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "去健身房",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
      ],
    };
  },
  methods: {
    checkCompleted(task) {
      task.isCompleted = !task.isCompleted;
    },
  },
};
</script>

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