在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Python  HTML/ vue列表渲染之后執(zhí)行方法

vue列表渲染之后執(zhí)行方法

如圖圖片描述

圖片描述

  • 上圖為列表部分,下圖為vue部分
  • 采用watch監(jiān)聽數(shù)據(jù)變化,然后用this.$nextTick等待dom渲染完成再執(zhí)行方法

預(yù)期得到這樣的結(jié)果
圖片描述

實(shí)際上得到的結(jié)果
圖片描述

如果說在控制臺執(zhí)行方法,可以將上圖變?yōu)轭A(yù)期結(jié)果
圖片描述

也就是說this.$nextTick的回調(diào)函數(shù)并不是在列表渲染結(jié)束之后執(zhí)行方法,請問這是什么情況?

回答
編輯回答
奧特蛋

1.確定一下imageList變化之后你的watch有沒有執(zhí)行
2.dom更新完了圖片不一定加載完了
3.在nextTick里加下打印,看看有沒有執(zhí)行

2018年9月22日 11:50
編輯回答
九年囚

nextTick 是 “在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM?!?很難保證 imageList 變化后的下一次 Dom 更新是圖片渲染出來的那一次更新,不一定準(zhǔn)確,建議通過渲染 控制展示,不要通過 Dom 操作的方法


評論不好貼代碼

let img = new Image();
img.src = t.employeeItem.employeePic;
img.onload = function(){
    Vue.nextTick(() => {
    // do something
    }
}
2017年8月8日 04:41