vue中ref配合v-for获取不到dom元素的解决办法

我们使用了v-for指令循环出来的数据，ref获取不到dom元素，例如以下代码：

        <div class="foods-wrap" ref="food">
            <ul>
                <li v-for="item in goodsList" class="food-list">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="food in item.foods" class="food-item">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon" alt="">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="month">
                                    <span class="count">预售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="new">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">{{food.oldPrice}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

methods:{
        scrolls(){
            
                this.menuScroll=new scroll(this.$refs['menu'],{})
                this.foodScroll=new scroll(this.$refs['food'],{})
        },
        heights(){
            var foodList=this.$refs['food'].getElementsByClassName('food-item');
            console.log(foodList)
            
                
        }
    },
    created(){
        this.$axios.get('/api/goods').then(res=>{
            if(res.status==200){
                this.goodsList=res.data.data;
                // console.log(this.goodsList)  
            }else{
                console.log(res)
            }
        }).catch(error=>{
            console.log(error)
        })
        this.$nextTick(function(){
            this.scrolls();
            //计算高度
            this.heights();
                
        })
    },

看到控制台输出的是

虽然控制台输出了，但是我们实际是取不到里面的元素，原因是使用了异步加载，应该把this.$nextTick写在异步的回调函数中

created(){
			this.$axios.get('/api/goods').then(res=>{
				if(res.status==200){
					this.goodsList=res.data.data;
					// console.log(this.goodsList)
					this.$nextTick(function(){
						this.scrolls();
						//计算高度
						this.heights();
						
					})
				}else{
					console.log(res)
				}
			}).catch(error=>{
				console.log(error)
			})
			
		},

看到控制台已经成功的打印出来了，这里我们是可以访问到每一个DOM元素，或者也可以使用定时器的方法获取

mounted(){	
			var that=this;
			this.$nextTick(function(){
				setTimeout(function(){
					that.scrolls();
						//计算高度
					that.heights();
				},100)
					
			})
			
		}

这种方法需要注意作用域的问题