I'm trying to add a button that changes color when clicked and changes isCompleted between true and false, what am I doing wrong? I have tried to change 'checkCompleted' to 'checkCompleted(task)' but it still gives the same error

(extra text so stackoverflow allows me post the question, they keep saying too much code and not enough text)

<template>
  <div >
    <div  v-for="(task, index) in tasks" :key="index">
      <div >
        <div >
          <h4>{{ task.title }}</h4>
        </div>
        <p>{{ task.description }}</p>
        <button
          
          @click="checkCompleted"
          v-if="!isCompleted"
        >
          Completed
        </button>
        <div  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>

CodePudding user response：

You're looping and want to reference the isCompleted from each task so

v-if="!isCompleted"

should be

v-if="!task.isCompleted"