使用better-scroll實現滾動菜單時，出現報錯“Failed to resolve directive: el”解決方案。

錯誤詳情：

使用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，不需要使用“-”

<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

  methods: {
    _initScroll () {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {})

      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
    }
  }