VUE 关于$nextTick的问题

created() {

  this.$http.get('/api/goods').then((response) => {
    response = response.body;
    if (response.errno === ERR_OK) {
      this.goods = response.data;     
    }
  });
        this.$nextTick(() => {
        this._initScroll();
      });
},
methods: {
  _initScroll() {
    this.meunScroll = new BScroll(this.$els.menuWrapper, {});
    this.foodsScroll = new BScroll(this.$els.foodsWrapper, {});
  }
}
    调用better-scroll插件报错;但是把this.$nextTick放进if里面就没有问题,
    既然$nextTick是在dom加载完再执行那应该随便放哪儿都行啊?
    初学vue,希望有人指点

这是报错内容
Uncaught (in promise) TypeError: bscroll.min.js?c4f9:1
Cannot read property 'style' of undefined

at new e (eval at <anonymous> (http://localhost:8080/app.js:733:2), <anonymous>:1:1609)
at VueComponent._initScroll (eval at <anonymous> (http://localhost:8080/app.js:703:2), <anonymous>:46:26)
at VueComponent.eval [as _initScroll] (eval at <anonymous> (http://localhost:8080/app.js:606:2), <anonymous>:216:72)
at VueComponent.eval (eval at <anonymous> (http://localhost:8080/app.js:703:2), <anonymous>:38:13)
at Array.func (eval at <anonymous> (http://localhost:8080/app.js:606:2), <anonymous>:491:10)
at nextTickHandler (eval at <anonymous> (http://localhost:8080/app.js:606:2), <anonymous>:447:16)
阅读 8.4k
评论 更新于 2017-02-27
    2 个回答

    一、this.$nextTick是在下次DOM更新循环结束时调用延迟回调函数。
    二、什么会引起DOM更新,Vue中响应式数据被修改(包括默认绑定)
    三、楼主之所以把this.$nextTick放在外部报错,首先this.$nextTick确实是DOM更新后触发回调函数,但是该函数的写的时机很重要。如官网的例子:

    this.msg = 'test';
    
    this.$nextTick(function(){
        console.log(this.msg);
    });

    这种情况下在msg被修改后下一次DOM更新结束时调用该回调函数。
    四、楼主把this.$nextTick()函数直接放在created()函数中,其实该函数的调用时机是在vue实例mounted钩子中响应式data属性绑定默认值以后(亲测)。此时this._initScroll被调用,此时传入的参数this.$els.menuWrapper以及this.$els.foodsWrapper有问题,导致在bscroll中无法拿到dom对象的style属性。(楼主应该贴上自己的DOM结构组织图)。
    五、之所以放到异步回调函数的if中不会报错,是因为异步回调函数的if中对this.goods字段进行了修改,在goods修改的下一轮dom更新结束后,才调用this._initScroll函数,此时拿到的this.$els.menuWrapper估计就是合法的。

    注:楼主想解决此问题,应看一下自己的goods字段绑定的dom结构是否和你想要传入的menuWrapper和foodsWrapper有关。极有可能是这里出了问题,才导致在不同的时机下获取到的this.$els.menuWrapper不同。(如无法解决,建议贴上DOM组织结构)

    评论 赞赏 2017-02-27

      this.$nextTick是在下次DOM更新循环结束时调用延迟回调函数。
      事实上,你第一次从后端获取数据,你页面DOM首次加载完也会执行这个函数
      你从后端获取数据本身就是个异步事件,你要在拿到数据之后调用$nextTick这个方法,就不会报错,正如你写在if里面,只要满足 ....then((response) => {

      // 写在这里就可以

      }
      写在then(..)方法之外就不行了了,因为在异步队列中$nextTick的优先级高,所以你总会拿不到的。

      评论 赞赏 2017-05-08
        撰写回答

        登录后参与交流、获取后续更新提醒