vue.js模仿饿了吗，nextTick方法似乎调用错误，没办法实现页面的滚动？？？

Question

问题描述

1、在用饿了吗实现goods组件时，没办法实现滚动，因为看的是vue.js模仿饿了吗1.0的视频，但是我已经按照2.0的代码去更新了，还是出错，控制台没有任何包括，一些输出都正常，就是没办法滚动；

问题出现的环境背景及自己尝试过哪些方法

这个是我控制台的效果，可以看到，所有的东西都是可以正常打印出来，没有任何问题的。
屏幕快照 2018-07-10 下午2.30.51

已经修改为vue.js2.0的代码了，包括ref="foodsWrapper"，this.$refs.menuWrapper，并完成了获取ul高度是，是在nextTick方法里面的，仍然没有任何的反应

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div class="goods">

<div class="menu-wrapper" ref="menuWrapper">
  <ul>
    <li v-for="item in goods" class="menu-item">
      <span class="text border-1px">
    <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
    {{item.name}}
  </span>
    </li>
  </ul>
</div>
<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>
      <ul>
        <li v-for="food in item.foods" class="food-item border-1px">
          <div class="icon" width="57" height="57">
            <img :src="food.icon">
          </div>
          <div class="content">
            <h2 class="name">{{food.name}}</h2>
            <p class="desc">{{food.description}}</p>
            <div class="extra">
              <span class="count">月售{{food.sellCount}} 份</span><span>好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">${{food.price}}</span><span class="old" v-show="food.oldPrice">${{food.oldPrice}}</span>
            </div>
          </div>
        </li>
      </ul>
    </li>
  </ul>
</div>

</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
const ERR_OK=0;
export default {

props:{
  seller:{
    type:Object
  }
},
data(){
  return {
    goods:[],
    /*listHeight:[]*/
  }
},
created(){
  this.classMap=['decrease','discount','guarantee','invoice','special'],
  this.$http.get('/api/goods').then((response)=>{
    response=response.body;
    console.log("1",response);
    if(response.errno===ERR_OK){
      this.goods=response.data;
      console.log("2",this.goods);
      console.log("3",this.$nextTick);
      this.$nextTick(() => {
        this._initScroll();
      });
    }
  })
},
methods:{
  _initScroll(){
    this.menuScroll=new BScroll(this.$refs.menuWrapper,{});
    this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
    console.log("4",this.menuScroll);
    console.log("5",this.foodsScroll);
  }
  }

};/然后再在main.js中导入它/
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

期待的结果是页面能够滚动起来，但实际上，没有任何反应，也没有报错。