错误详情:
使用better-scroll实现滚动菜单时,报错“Failed to resolve directive: el”。
错误原因:
这是因为v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el,下面是修改的方法。
解决方案:
升级前使用v-el的代码:
<div class="menu-wrapper" v-el:menu-wrapper>
<ul>
<li v-for="(item,index) of goods" :key="index" class="menu">
<span class="text border-1px">
<icon :size="3" :type="item.type" v-show="item.type>0" class="icon"></icon>
{{item.name}}
</span>
</li>
</ul>
</div>
升级后,使用ref代码:
注意这里:
1.v-el: menu-wrapper → ref=”menuWrapper”
2.直接使用驼峰法书写 menuWrapper,不需要使用“-”
foods.vue中的< template>:
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li v-for="(item,index) of goods" :key="index" class="menu">
<span class="text border-1px">
<icon :size="3" :type="item.type" v-show="item.type>0" class="icon"></icon>
{{item.name}}
</span>
</li>
</ul>
</div>
后面通过js获取dom元素的时候,写法也同样发生了变化
els ——> refs
foods.vue中的< script>:
created () {
this.$http.get('/api/goods').then((response) => {
response = response.body
if (response.errno === ERR_OK) {
this.goods = response.data
console.log(this.goods)
this.$nextTick(() => {// vue是异步更新,必须加$nextTick,才能在nextTick里面更新,实现滚动。。
this._initScroll()
})
}
})
},
methods: {
_initScroll () {//初始化,实现滚动。
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})//初始化,使得menu菜单栏实现滚动效果。
this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})//初始化,使得foods菜单栏实现滚动效果。
}
}