使用better-scroll實現滾動選單時,出現報錯“Failed to resolve directive: el”解決方案。
阿新 • • 發佈:2019-01-09
錯誤詳情:
使用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選單欄實現滾動效果。
}
}