Vue.js仿饿了么中$nextTick()方法中的this.$els报错undefined问题

原创
2018/10/15 01:22
阅读数 8.1K

在学习Vue.js仿饿了么项目的过程中我遇到了一个关于better-scroll用法的问题,就是$nextTick函数Vue中DOM的异步更新问题,即确保dom树变化之后再发送ajax请求,在得到class的选择器作用步骤上出错了。

资料:

https://blog.csdn.net/qq_20777797/article/details/78233615页面中,我了解到Vue.nextTick()和Vue.$nextTick()的区别

`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调;

`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

在通过上网查找相关资料,我了解到了$els如下的一些知识点:

$els 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素;

因为 HTML 不区分大小写,camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl;

$els类似于document.querySelector('.class')的功能,可以拿到指定的dom元素。(注意v-el在vue2.0中已经删除改为ref="someEl" 驼峰形式的命名)。

在项目中,它的写法如下:

this.$nextTick(() => {
  this.scroll = new BScroll(this.$els.ratings, {
    click: true
  });
});

但是运行后你会发现,页面报错说ratings为undefined,为了发现错误,我在代码中加入测试语句,代码如下:

this.$nextTick(() => {
  this.scroll = new BScroll(this.$els.ratings, {
    click: true
    console.log(this.$els)
  });
});

发现,在页面的控制台打印出来的this.$els为undefined,为了解决这个问题,我折腾了好久,最终没有解决这个问题,但是选择了其他方法来达到这个效果,反正它的写法很多:

方法一:直接把this.$els.ratings代码修改为document.getElementsByClassName('.ratings')[0],用法为:

代码如下:

this.$nextTick(() => {
  this.scroll = new BScroll(document.getElementsByClassName('.ratings')[0], {
    click: true
  });
});

方法二:直接在选择器想要的class的div中写入ref="ratings",在把this.$els.ratings代码修改为this.$refs.ratings,在Vue2.0中v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用,代码如下:

注意:ref="ratings"和this.$els.ratings中的rating是一模一样的,不一致时,控制台会报Error in nextTick: "TypeError: Cannot read property 'children' of undefined"的错误。

毕竟Vue 1.0的时候一般写法为:v-el: foods-wrapper和this.$els.foodsWrapper,所以要小心。

方法三:直接在选择器想要的class的div中设置id属性即可

以上三种方法都可以达到想要的效果,区别只是写法不同而已。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部