Vue在监听到数据改变或者dom元素渲染完之后执行的回调函数
在使用vue开发时遇到了一个问题,修改玩vue的data数据之后,操作dom,却发现没有改变,操作的dom还是之前的dom,后来在测试延时操作dom发现可以实现操作更新之后的dom了。从网上查询资料发现是vue对象在更改完值之后然后去渲染dom元素,我执行的代码发生在了vue还没渲染完成的时候,因此会拿不到更新后的dom,解决办法为使用$nextTick()方法,这是vue在值改变时进行dom渲染
·
在使用vue开发时遇到了一个问题,修改玩vue的data数据之后,操作dom,却发现没有改变,操作的dom还是之前的dom,后来在测试延时操作dom发现可以实现操作更新之后的dom了。
从网上查询资料发现是vue对象在更改完值之后然后去渲染dom元素,我执行的代码发生在了vue还没渲染完成的时候,因此会拿不到更新后的dom,解决办法为使用 $nextTick()方法,这是vue在值改变时进行dom渲染完成之后的回调函数。
var myVue = new Vue({
el:'#app',
data:{
// 最近浏览的项目列表
historyProjects: []
},
methods:{
reloadHistoryProjects() {
let data;
visitPhHisList(data).then(response => {
if (response.status == 200) {
this.historyProjects = response.data.data;
this.$nextTick(function() {
// 设置第一个历史项目菜单选中
this.setFirstHistoryProjectMenuSelected()
})
} else {
this.$coralMessage({msg: "读取最近浏览历史项目数据异常", type: "error"})
}
}).catch(error => {
console.log(error);
});
},
setFirstHistoryProjectMenuSelected(){
let historyCnt = document.querySelectorAll("#historyProjectsGroup ul .el-menu-item").length;
if (historyCnt > 0) {
document.querySelectorAll("#historyProjectsGroup ul .el-menu-item").forEach(item =>
item.classList.remove("is-active")
)
}
// 选中第一个历史浏览项目菜单
document.querySelector("#historyProjectsGroup>ul>div>li").classList.add("is-active");
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)