我有一个目标数组,用户可以在应用程序中插入该目标数组,并使用v-for循环在目标路线中渲染该目标数组,并带有目标名称和旁边的一个按钮。每个目标都是一个对象,在这里我有一个空数组,我想在该数组中推送用户在输入中插入的待办事项,以便在单击它旁边时将其添加到相对目标中。我正在使用vuex,因此必须将索引和待办事项转移到store.js中的突变。
这是索引值来自的路由
<div class="list" v-for="(goal, index) in goals" :key="goal.goal">
<h2>{{goal}}</h2><add-button-task></add-button-task>
<div :class="{ isActiveTask : !isActiveTask }">
<div class="modal-backdrop">
<div @keyup.enter="addToDo(index)" class="modal">
<p>Add task to {{goal.goal}}</p>
<h3>Task</h3>
<br>
<input @keyup.escape="abortTask()" type="text" v-model="todo" maxlength="60">
<button @click="addToDo(index)">Add</button>
</div>
</div>
</div>
</div>
<div class="addLongTerm">
<p>Create a new long term goal</p>
<add-button-goal id="add"></add-button-goal>
</div>
addToDo(index){
if(this.todo == ''){
return
} else {
this.$store.commit('addToDo',
{'index':index,
'todo': this.todo})
this.todo = '';
this.toggleIsActiveTask();
}
},
这是在vuex中
addToDo(state,object){
state.goals[object.index].toDo.push(object.todo)
console.log(object.index)
},