如何将任务添加到Vue 2待办事项应用程序中的列表中?

Question

我试图根据输入和添加任务按钮在Vue中添加任务列表中的任务，但我一直得到错误"tasklist未定义"。有人知道怎么解决这个问题吗?代码如下:

<template>
<div id="input">
<form>
<input v-model="task.name">
<button v-on:click="addTask" v-bind:value="task.name">+</button>
</form>
<ol>   
<div v-for="task in taskList" :key="task.id">
{{ task.name }}
<div v-if="task.completed">
<h2> Done </h2>
</div>
<div v-else>
<h2> Not done</h2>
</div>
</div>
</ol>

</div> 

</template>
<script>
export default {
name: 'AddTask',
data: function() {
return {
taskList: [
{                   
name: 'task', completed: false, id: 3
}               
] }  

},
methods: {
addTask: function (task) {
taskList.push(task);
alert('test');
} 
}
}
</script>

p。如有其他建议也欢迎。

Answer 1

你需要将你的taskList和你正在添加的当前任务分开，将其解耦为一个新对象，然后将其添加到你的taskList数组中。

当引用数据对象中的项时，您需要使用this关键字-例如this.taskList而不是taskList:

new Vue({
el: "#app",
data: {
id:1,
taskList: [],
currentTask:{
completed:false,
name:'',
id:this.id
}
},
methods: {
addTask: function() {

let newTask = {
completed:this.currentTask.completed,
name:this.currentTask.name,
id:this.currentTask.id
}

this.taskList.push(newTask);
this.id++;
//alert('test');
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="input">
<ol>
<li v-for="task in taskList" :key="task.id">
{{ task.name }}
<input type="checkbox" 
:checked="task.completed"
@change="task.completed = !task.completed">
<span v-if="task.completed">
Done
</span>
<span v-else>
Not Done
</span>
</li>
</ol>
<input type="text" v-model="currentTask.name">
<button v-on:click="addTask">+</button>
</div>
</div>

Answer 2

从我在模板中看到的，您使用tasklist，但您将其定义为taskList。您将需要确保您的名称在相同的情况下。通常你会在vue中看到camelCase，但其他常用的是snake_case和PascalCase