关于 v-for 中 ref获取问题

Question

<template lang="html">
<div class="a">
  <div class="goods-container">
      <div class="goods-left" ref="leftScroll">
        <ul>
          <li class="goods-left-list" :class="{'active':currentIndex===idex}" v-for="(item,idex) in goods" :key='item.name' @click="tofood(idex)">
            <span class="text border-1px">
              <span class="icon" v-if="item.type>0" :class="icon[item.type]"></span>{{item.name}}
            </span>
          </li>
        </ul>
      </div>
      <div class="goods-right" ref="rightScroll">
        <ul>
          <li class="goods-right-wrapper iconclass "  v-for = "item in goods " :key="item.name"  ref="item">
            <h1 class="goods-title" ref="a">{{item.name}}</h1>
            <ul>
              <li class="goods-item border-1px"
                v-for = "food in item.foods"
                :key="food.name"
                @click="getfoodinfo(food, $event)"
                >
                <img :src="food.icon" alt="" class="goods-icon">
                <div class="goods-content">
                  <h1 class="goods-name">{{food.name}}</h1>
                  <p class="goods-description">{{food.description}}</p>
                  <p class="goods-sell">月售:{{food.sellCount}}<span class="goods-sell-rating"> 好评{{food.rating}}%</span></p>
                  <p class="goods-price">
                    <span class="goods-price-one-icon">￥</span><span class="goods-price-one">{{food.price}}</span><span v-show="food.oldPrice" class="goods-price-two-icon">￥</span><span v-show="food.oldPrice" class="goods-price-two">{{food.oldPrice}}</span>
                  </p>
                </div>
                <div class="goodsControl-wrapper" >
                  <transition><goodsControl :food="food" @getdom="getdom" ></goodsControl></transition>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <shop  :seller="seller" :goods="goods" ref="shop"></shop>
      <food :foodInfo="foodInfo" @getdom="getdom"  ref="foodInfoShowDom"></food>
  </div>
</div>
</template>

  mounted() {
    this.scrollall();
    // this.getItemHeight();
    // this.$nextTick(() => {
    //   this.getItemHeight();
    setTimeout(() => {
      this.getItemHeight();
    });
  },

getItemHeight() {
      // 这里来得到每个大块的高度 0为起点  每两个就是一个区间
      let item = this.$refs.item;
      console.log(this.$refs.item);
      let height = 0;
      this.listHeight.push(height);
      for (var i = 0; i < item.length; i++) {
        height += item[i].clientHeight;
        // 注意这里不可以使用  height += item[i].style.height;  这个必须是你写了这个样式才可以得到
        this.listHeight.push(height);
      }
    },

看别人说获取v-for 上ref 在 mounted 或者 this.$nextTick 执行方法就可以 但 我试了都不行 只有用settimeout才可以 但是在和其同级组件停留时间较长在切换回去时 还是会报错
getItemHeight()
中的 item 快速切换没问题
这为什么 怎么解决

在和其同级组件 评论 停留时间较长在切换回 商品 时 报错

Answer 1

你的 good 数组的数据是接口异步获取的么？如果是这样，初次 mounted 完成也只是把能够渲染出的DOM渲染出来，异步获取的数据只能在数据加载完成之后使用 nextTick 去获取DOM，另外要注意 refs 不是响应式的，所以不要那它做数据绑定。而 setTimeout 是同一批次的事件循环结束后才执行的，所以它能保证在此之间的所有同步和异步响应都执行完。