vue2 todolist实现修改
时间: 2023-07-18 21:24:32 浏览: 41
要实现Vue2的todolist修改功能,可以按照以下步骤进行:
1. 首先,在data中定义一个新的变量editIndex,用来存储当前正在编辑的任务的索引。
2. 在模板中,给每个任务添加一个编辑按钮,并绑定一个点击事件,将当前任务的索引赋值给editIndex。
```html
<ul>
<li v-for="(task, index) in taskList">
<span v-if="editIndex !== index">{{ task }}</span>
<input v-else v-model="taskList[editIndex]">
<button @click="editIndex = index">编辑</button>
<button @click="deleteTask(index)">删除</button>
</li>
</ul>
```
3. 在methods中,添加一个updateTask方法,用来更新当前正在编辑的任务。
```javascript
methods: {
updateTask() {
this.editIndex = null;
}
}
```
4. 在模板中,将编辑状态和非编辑状态进行判断,使用v-if和v-else指令分别展示。
5. 最后,在编辑完成后调用updateTask方法,将editIndex重置为null,退出编辑状态。
完整的代码如下:
```html
<template>
<div>
<input v-model="newTask">
<button @click="addTask">添加</button>
<ul>
<li v-for="(task, index) in taskList">
<span v-if="editIndex !== index">{{ task }}</span>
<input v-else v-model="taskList[editIndex]">
<button @click="editIndex = index" v-if="editIndex !== index">编辑</button>
<button @click="updateTask()" v-else>完成</button>
<button @click="deleteTask(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
taskList: [],
newTask: '',
editIndex: null
}
},
methods: {
addTask() {
if (this.newTask.trim() === '') {
return;
}
this.taskList.push(this.newTask);
this.newTask = '';
},
deleteTask(index) {
this.taskList.splice(index, 1);
},
updateTask() {
this.editIndex = null;
}
}
}
</script>
```