vue2X出现：Failed to resolve directive: el 报错

最新推荐文章于 2023-11-21 15:08:27 发布

Jack_13201

最新推荐文章于 2023-11-21 15:08:27 发布

阅读量626

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Jack_13201/article/details/106276829

版权

一：问题原因

为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el，下面和大家分享一下使用方法。

二：旧版本的写法

html代码

<div class="menu-wrapper" v-el:meun-wrapper>
    <ul>
      <li v-for="(item, index) in goods" :key="index" class="menu-item">
        <span class="text border-1px">
          <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>

在这里插入图片描述
js中代码

// 初始化Scroll
    initScroll() {
      this.meunScroll = new BScroll(this.$els.meunWrapper,{})
      this.foodsScroll = new BScroll(this.$els.foodsWrapper,{})
    }

在这里插入图片描述

三：更新后的写法

html代码

 <!-- 商品左侧导航栏 -->
  <div class="menu-wrapper" ref="menuWrapper">
    <ul>
      <li v-for="(item, index) in goods" :key="index" class="menu-item">
        <span class="text border-1px">
          <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
          {{item.name}}
        </span>
      </li>
    </ul>
  </div>

在这里插入图片描述
js代码

 // 初始化Scroll
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
      this.menuScroll = new BScroll(this.$refs.foodsWrapper, {})
    }

在这里插入图片描述