我试图添加一个任务到基于输入和添加任务按钮的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>
Ps。任何其他的Vue技巧也是受欢迎的。
###你需要分离出你的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>
###从我看到你使用的模板tasklist but you define it as taskList You但是你把它定义为taskList You will want to make您将需要确保您的名字在相同的情况下。通常你会在vue中看到camelCase，但其他流行的是snake_case和PascalCase
###看看这个例子(所有的CRUD实现):
new Vue({
el: '#demo',
name: 'AddTask',
data() {
return {
task: {},
taskList: [{name: 'task', completed: false, id: 1}],
selected: false,
ico: '+'
}
},
methods: {
addTask() {
if (this.selected) {
this.taskList.map((item) =>
item.id !== this.task.id ? item : {...item, ...this.task}
)
} else if (this.task.name !== '' && this.task.name !== undefined) {
this.task.id = this.taskList.length + 1
this.taskList = [this.task, ...this.taskList];
}
this.clearTask()
},
selectTask(task) {
this.task = task
this.selected = true
this.ico = 'update'
},
removeTask(id) {
this.taskList = [...this.taskList.filter(t => t.id !== id)]
this.clearTask()
},
clearTask() {
this.task = {}
this.selected = false
this.ico = '+'
}
}
})
form, .list {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
border: 1px solid grey;
padding: .5em;
margin: 0 auto;
}
form {
justify-content: center;
background: grey;
}
h3 {margin: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div id="input">
<form>
<label for="name">Name</label>
<input v-model="task.name" id="name">
<label for="com">Completed</label>
<input type="checkbox" v-model="task.completed" id="com" />
<button @click.prevent="addTask">{{ ico }}</button>
</form>
<ol>
<div v-for="task in taskList" :key="task.id" class="list">
<h3 @click="selectTask(task)">{{ task.name }}</h3>
<div v-if="task.completed"> Done </div>
<div v-else> Not done </div>
<button v-if="task.id" @click.prevent="removeTask(task.id)">-</button>
</div>
</ol>
</div>
</div>
