初學vue作練習項目的時候,基於vue2.0版本使用refs屬性獲取v-for循環的dom時出現獲取不到dom的狀況,嘗試採用原生的方法出現一樣的狀況。查了不少資料沒有找到對應的詳細說明,現將我發現的一些問題分享給你們。html
html部分vue
<div class="food-group" v-for="(item,index) in goods" :key="index" ref="group">
....
</div>
複製代碼
定義的方法methodsbash
methods: {
getHeightList() {
let height = 0;
this.heightList.push(height);
// let list = this.$refs.goods.getElementsByClassName("food-group");
console.log(this.$refs);
console.log(this.$refs.group);
}
},
複製代碼
嘗試在mounted生命週期裏面執行方法獲取refs的DOMdom
mounted() {
this.$nextTick(() => {
this.menuScroll = new BScroll(this.$refs.menu);
this.goodsScroll = new BScroll(this.$refs.goods);
this.getHeightList();
});
}
複製代碼
出現的結果函數
能夠發現這裏打印this.refs裏面是有group對應的Dom的,可是在下面答應對應的Dom的時候出現undefined的狀況,下面是嘗試把ref獲取改爲d原生獲取的方法。ui
methods: {
getHeightList() {
let height = 0;
this.heightList.push(height);
let list = this.$refs.goods.getElementsByClassName("food-group");
//this.$refs.goods是剛纔要獲取的Dom的父元素,food-group是要獲取的Dom的類名
console.log(list);
console.log(list.length);
}
},
複製代碼
出現的結果this
能夠看到這裏出現的狀況和上面ref獲取出現的狀況是同樣的,打印出來是有的,可是一旦輸出結果卻發現length是0,也就是沒有獲取到。spa
在操做dom的自定義函數執行先後加入debugger調試,發如今該函數執行的時候,數據並無綁定,dom也仍是沒有渲染的狀態,這和網上一些帖子講的是同樣的,可是問題來了,該函數執行也是在this.$nextTick裏面執行的,應該是Dom渲染完成菜執行的。這裏就引出了這裏的關鍵性的問題:debug