时间戳

首页 > 解决方案 > Vue3/Vite 中的方法

function - Vue3/Vite 中的方法

问题描述

有人可以告诉我如何在 Vite 中实现我的“del”方法吗？使用我的实际代码，我收到以下错误：


[Vue 警告]：在 <Home onVnodeUnmounted=fn ref=Ref< Proxy {...} >> at warn @ runtime-core.esm-bundler.js:38 logError @ runtime-core 处执行本机事件处理程序期间出现未处理错误。 esm-bundler.js:212 handleError @ runtime-core.esm-bundler.js:204 callWithErrorHandling @ runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:164 调用者@runtime- dom.esm-bundler.js:349 runtime-core.esm-bundler.js:218 Uncaught TypeError: Cannot read property 'tasks' of undefined

这些是我的代码中的相关部分：

<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)">✓&lt;/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);

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

标签： functionvue.jsmethodsvuejs3

解决方案

任务应定义为 ref 属性并使用valuefield 进行变异：

<script>
import { ref, reactive, computed } from "vue";
export default {
  setup() {
    let tasks = ref([
            {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) => tasks.value.splice(index,1);

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

this在设置挂钩中无法访问

推荐阅读