Блог

Может ли кто-нибудь, пожалуйста, сказать мне, как я должен написать метод «Изменение», к которому я могу получить доступ в отдельном индексе списка задач, чтобы изменить логическое значение finish с true на false и наоборот?

Мой Код:

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

При этом я получаю ошибку:

 Uncaught TypeError: tasks is not a function
 

В JavaScript скобки после символа вызывают функцию:

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

Вместо круглых скобок используйте квадратные скобки для ссылки на элемент массива по индексу:

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

Также tasks должна быть reactive опора, чтобы ее изменения вызывали повторную визуализацию:

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

ДЕМОНСТРАЦИЯ