Vite Vue3 change boolean

Question

Can somebody please tell me how I have to write the "doneChange" method that I can access on the individual index of the tasks list to change the boolean of finish from true to false and viceversa?

My Code:

<template>
<div>
<h1>Alle Aufgaben</h1>
        <ul>
            <li v-for="(task, index) in tasks" :class="{ 'done' : task.finish}">
                <p>{{task.description}}</p>
                <button class="doneChange" @click="doneChange(index)">✓</button>
                <button class="del" @click="del(index)">X</button>
            </li>
        </ul>
</div>
</template>

<script>
import { ref, reactive, computed } from "vue";
export default {
  setup() {
    let tasks = [
            {description: "Frühstücken", finish: true},
            {description: "Lernen", finish: false},
            {description: "Trainieren", finish: false},
            {description: "Einkaufen", finish: false},
            {description: "Mails", finish: false},
            {description: "Abendessen", finish: false},
        ];

    const del = (index) => this.tasks.splice(index,1);
    const doneChange = (index) => tasks(index).finish = !tasks(index).finish;

        return { tasks, del, doneChange };
    }
};
</script>

With this I get the error:

Uncaught TypeError: tasks is not a function

tony19 · Accepted Answer · 2021-08-08 22:41:29Z

0

In JavaScript, the parentheses after a symbol invokes a function:

tasks(index).finish = !tasks(index).finish  // ❌ calls a function named `tasks`
     ^     ^                ^     ^

Instead of parentheses, use square brackets to reference an array element by index:

tasks[index].finish = !tasks[index].finish

Also tasks should be a reactive prop so that its changes causes a re-render:

let tasks = reactive([/*...*/])

demo

edited Aug 8, 2021 at 22:41

answered Aug 8, 2021 at 22:32

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vite Vue3 change boolean

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related