我正試圖根據輸入和添加任務按鈕向Vue中的任務串列添加任務，但我一直得到錯誤 "taskList未定義"。有沒有人知道如何解決這個問題？代碼如下：
。<template>
<div id="input">
<form>/span>
<input v-model="task.name">/span>
<button v-on:click="addTask"/span> v-bind:value="task. name"> </button>
</form>/span>
<ol>
<div v-for="task in taskList" ：key="task。 id">
{{ task.name }}}
<div v-if="task.completed">
<h2> Done </h2>/span>
</div>/span>
<div v-else>
<h2> 未完成</h2>
</div>/span>
</div>/span>
</ol>/span>
</div>/span>
</template>/span>
<script>
export default {
name: 'AddTask',
data: function() {
return {
taskList: [
{
name: 'task', completed: false, id: 3, id.
}
] }
},
methods: {
addTask: function (task) {
taskList.push（task）。
alert（'test'）。
}
}
}
</script>Ps. 也歡迎任何其他的Vue技巧。
CodePudding
你需要將你的任務串列和你正在添加的當前任務分開，將其解耦為一個新物件，然后將其添加到你的任務串列陣列中。
當參考你的資料物件中的專案時你需要使用 this關鍵字 - 例如this.taskList而不是taskList：
new Vue（{
el: "#app"/span>,
data: {
id:1,
taskList: [],
currentTask:{
completed:false。
name:''/span>。
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>/span>
<div id="app">/span>
<div id="input">
<ol>/span>
<li v-for="task in taskList" ：key="task。 id">
{{ task.name }}}
<input type="checkbox"/span>
:checked="task.completed"。
@change="task.completed = !task.completed">
<span v-if="task.completed">/span>
完成了
</span>/span> Done
<span v-else>/span>
未完成
</span> 未完成
</li>/span>
</ol>/span>
<input type="text" v-model="currentTask. name">
<button v-on。 click="addTask"> </button>
</div>/span>
</div>/span>uj5u.com熱心網友回復：
從我所看到的你的模板中，你使用了tasklist，但你把它定義為taskList，你要確保你的名字大小寫一致。通常你會在vue中看到camelCase，但其他流行的是snake_case和PascalCase
uj5u.com熱心網友回復：
看看這個例子（全部實作了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) => /span>
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(span class="hljs-params">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;
縫隙。1em;
border: 1px solid gray;
padding: .5em;
margin: 0 auto;
}
form {
justify-content: center;
background: gray;
}
h3 {margin: 0;}<script src="https://cdnjs. cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>/span>
<div id="demo">/span>
<div id="input">
<form>/span>
<label for="name"/span>> Name</label>。
<input v-model="task。 name" id="name">。
<label for="com"/span>> 完成</label>
<input type="checkbox" v-model="task。 completed" id="com" />。
<button @click. prevent="addTask">{{ico }}</button>
</form>/span>
<ol>
<div v-for="task in taskList" ：key="task。 id" class="list">。
<h3 @click="selectTask(task)">/span>{{ task. name }}</h3>{ task.
<div v-if="task. completed"> Done </div>
<div v-else> 未完成 </div>
<button v-if="task.id" @click。 prevent="removeTask(task.id)">-</button>/span>
</div>
</ol>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/327592.html
標籤：