關於VUE中v-for循環的dom使用ref獲取不到問題

背景:

初學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

使用debugger調試的發現:

在操做dom的自定義函數執行先後加入debugger調試,發如今該函數執行的時候,數據並無綁定,dom也仍是沒有渲染的狀態,這和網上一些帖子講的是同樣的,可是問題來了,該函數執行也是在this.$nextTick裏面執行的,應該是Dom渲染完成菜執行的。這裏就引出了這裏的關鍵性的問題:debug

  • vue組件初始化到第一次渲染完成,也就是mounted週期裏面,只是把組件模板的靜態數據渲染了,動態綁定的Dom,並無初始化,因此咱們在mounted週期裏面操做獲取dom是獲取不到的。
解決方案:
  1. 把this.$nextTick放在你獲取到v-for綁定的數據並賦值以後,也就是觸發響應式更新以後在操做。
  2. 把操做dom的操做放到updated生命週期裏面執行,可是這樣會出現,每次跟新視圖,都會觸發該操做。
相關文章
相關標籤/搜索