鍍金池/ 問答/HTML/ vue獲取dom元素

vue獲取dom元素

希望獲取每一個子元素的高度
html

    <div class="foods-wrapper" ref="foodsWrapper">
      <ul>
         <li v-for="item in goods" class="food-list food-list-hook">
           <h1 class="title">{{item.name}}</h1>
         </li>
      </ul>    
    </div>

vue邏輯

    mounted() {
      this.$nextTick(() => {
        this._calculateHeight()
      })
    },
    methods: {
      _calculateHeight() {
        let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
        console.log(foodList)
        console.log(foodList.length)// 0
      }

_calculatrHeight中得到的foodList打印出來如下，length長度為9，但是并不能使用，打印foodList.Length長度為0，求指點
圖片描述

回答
編輯回答
膽怯

this.$nextTick放在你獲取到goods數據并賦值之后

// 獲取數據
this.getGoods().then(res => {
    this.goods = res.data  // 賦值 觸發(fā)響應式更新
    this.$nextTick(()=>{  // DOM更新之后獲取子元素
        this._calculateHeight()
    })
})
2018年6月21日 10:50
編輯回答
離人歸

你console 是在哪console的?

別的函數內部?

你用let 聲明? 別的肯定不能訪問

2018年9月18日 22:55
編輯回答
櫻花霓

很好奇為什么不能用 你這個dom元素數組 循環(huán)取出高度不就好了。

2017年3月10日 02:33