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

Posted 2023-02-16

【中文标题】Vue 属性或方法“isCompleted”未在实例上定义，但在渲染期间引用

【英文标题】：Vue Property or method "isCompleted" is not defined on the instance but referenced during render

【发布时间】：2022-01-04 04:04:34

【问题描述】：

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

（额外的文字，所以***允许我发布问题，他们一直说代码太多而文字不够）

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

【问题讨论】：

v-if="!isCompleted" 应该是v-if="!task.isCompleted"

【参考方案1】：

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

v-if="!isCompleted"

应该是

v-if="!task.isCompleted"