Vue 属性 或方法 "isCompleted" 未在实例上定义但在渲染期间被引用

Question

我正在尝试添加一个按钮，该按钮在单击时会改变颜色，并且会在 true 和 false 之间更改 isCompleted，我做错了什么？我试图将 'checkCompleted' 更改为 'checkCompleted(task)' 但它仍然给出相同的错误

（额外的文字所以 Whosebug 允许我 post 这个问题，他们一直说代码太多而文字不够）

<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"
          v-if="!isCompleted"
        >
          Completed
        </button>
        <div class="btn- red" v-else>Incomplete</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      tasks: [
        {
          title: "Read Books",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Wash Plates",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Play Fifa",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Go Gym",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
      ],
    };
  },
  methods: {
    checkCompleted() {
      this.isCompleted = this.isCompleted ? true : false;
    },
  },
};
</script>

Answer 1

您正在循环并希望从每个任务中引用 isCompleted 所以

v-if="!isCompleted"

应该是

v-if="!task.isCompleted"