1. 简介
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。
2. demo
<template>
<li>
<label>
<input
type="checkbox"
:checked="sendTodoObj.done"
@change="handleCheck(sendTodoObj.id)"
/>
<span v-show="!sendTodoObj.Edit">{{ sendTodoObj.title }}</span>
<input
type="text"
v-show="!sendTodoObj.Edit"
:value="sendTodoObj.title"
@blur="handleBlur(sendTodoObj, e)"
/>
</label>
<button class="btn btn-danger" @click="todoDelete(sendTodoObj.id)">
删除
</button>
<button class="btn btn-edit" @click="todoEdit(sendTodoObj)">更新</button>
</li>
</template>
<script>
export default {
name: "MyItem",
props: ["sendTodoObj"],
methods: {
handleCheck(id) {
this.$bus.$emit("checkTodo", id);
},
todoDelete(id) {
if (confirm("确定删除吗?")) {
this.$bus.$emit("deleteTodoObj", id);
}
},
todoEdit(sendTodoObj) {
console.log("todoEdit", sendTodoObj);
if (sendTodoObj.hasOwnProperty("isEdit")) {
sendTodoObj.isEdit = true;
} else {
this.$set(sendTodoObj, "isEdit", true);
}
},
handleBlur(sendTodoObj, e) {
console.log("handleBlur", sendTodoObj);
sendTodoObj.isEdit = false;
this.$bus.$emit("updateTodoObj", sendTodoObj.id, e.target.value);
this.$nextTick(function () {
this.$refs.inputTitle.focus();
});
},
},
};
</script>
<style scoped>
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
li:hover {
background-color: #ddd;
}
li:hover button {
display: block;
}
</style>