TodoList添加编辑功能$nextTick

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了在Vue.js组件中如何使用hasOwnProperty()检查属性，$set方法确保响应式属性的更新，并利用$nextTick在DOM更新后执行后续操作，特别是在编辑功能中聚焦输入框的问题。

效果图

todolist编辑

部分代码

myItem.vue
这里用到了hasOwnProperty()方法，可以检验数组中是否包含该属性
注意在这里必须要是用$set()方法才可以，不然不会生成getter和setter

在点击编辑时时这里使用了 $nextTick 才可以获取焦点哦
$nextTick
1.语法:this. $extTick(回调函数)
2.作用:在下一次DOM更新结束后执行其指定的回调
3.什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

<template>
	<div class="itemContent">
		<div class="inputList">
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
			<div v-show="!todo.isEdit"> {{todo.title}}</div>
			<input v-show="todo.isEdit" :value="todo.title"  @blur="blurEdit(todo,$event)" type="text" ref="inputEdit">
		</div>
		<div class="btnList">
			<div v-show="!todo.isEdit" class="delBtn edit" @click="handleEdit(todo)">编辑</div>
			<div class="delBtn" @click="handleClear(todo.id)" >删除</div>
		</div>
	</div>
</template>
<script>
	import pubsub from 'pubsub-js'
	export default {
		name: 'MyItem',
		// 声明接收todo对象
		props: ['todo'],
		methods: {
			// 勾选
			handleCheck(id) {
				this.$bus.$emit('checkTodo', id)
			},
			//删除
			handleClear(id) {
				if (confirm('确认要删除吗？')) {
					pubsub.publish('clearTodo', id)
				}
			},
			// 编辑
			handleEdit(todo){
				if(todo.hasOwnProperty('isEdit')){
					todo.isEdit = true
				}else{
					this.$set(todo,'isEdit',true)
				}
				this.$nextTick(function(){
					this.$refs.inputEdit.focus()
				})
			},
			// 失去焦点回调(真正执行修改逻辑)
			blurEdit(todo,e){
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
				todo.isEdit = false
			}
		},
		beforeDestroy() {

		}
	}
</script>

app.vue

...
methods:{
	// 更新一个todo
			updateTodo(id,value){
				this.todos.forEach((todo)=>{
					if(todo.id===id){
						todo.title = value
					}
				})
				
			}
}
...

一点小知识！！！