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

Question

我将 Vite 与 Vue3 结合使用，当我编译代码时出现以下错误：

runtime-core.esm-bundler.js:38 [Vue warn]: Property "tasks" was accessed during render but is not defined on instance. at <Home onVnodeUnmounted=fn ref=Ref< undefined > > at at

这是我的代码：

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

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

Vue3 “Accessed during render but is not defined on instance”

defined

vue.js

vuejs3

vite