如何在vue.js中的for循环中获取数组的索引

时间:2020-08-06 15:23:44

标签: vue.js vuex

我有一个目标数组,用户可以在应用程序中插入该目标数组,并使用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)
        },

0 个答案:

没有答案