Vue3“在渲染期间访问但未在实例上定义”

Question

我在 Vue3 中使用 Vite，编译代码时出现以下错误：

runtime-core.esm-bundler.js:38 [Vue 警告]：属性“tasks”是 在渲染期间访问但未在实例上定义。在>在 在

这是我的代码：

<template>
    <div id="taskApp">
        <h1>To do Liste</h1>
        <p>
            <label for="neueAufgabe">Weitere Aufgaben</label>
            <input id="neueAufgabe" type="text">
            <button class="add">Erstellen</button>
        </p>

        <h1>Alle Aufgaben</h1>
        <ul>
            <li v-for="(task, index) in tasks" :key="task">
                <p>{{task.description}}</p>
            </li>
        </ul>
    </div>


</template>

<script>
import { reactive, computed } from "vue";
export default {
  setup() {
    const data = reactive({
       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},
        ]});
        return {data};
    }
};
</script>

有人可以帮我解决这个问题吗？

Answer 1

提前申领，我没测试过：

import { reactive } from "vue";
export default {
  setup() {
    const tasks = reactive([
            {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},
        ]);
        return { tasks };
    }
};