Failed to resolve directive: el vue2报错 (vue v-sl)

最新推荐文章于 2025-04-08 16:49:39 发布

原创最新推荐文章于 2025-04-08 16:49:39 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

59 篇文章

订阅专栏

本文介绍Vue2中v-el指令被淘汰的原因，并展示了如何将v-el替换为ref来获取DOM元素。同时提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2报错 Failed to resolve directive: el

为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el，接下来告诉大家怎么使用。

之前v-el的写法

<div class="menu-wrapper" v-el="menu-wrapper">
      <ul class="menu">
        <li v-for="item in goods" class="menu-item">
          <span class="text">
            <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>1
2
3
4
5
6
7
8
9

这是使用ref的写法
*请注意：menuWrapper不能使用menu-wrapper这种写法了

<div class="menu-wrapper" ref="menuWrapper">
      <ul class="menu">
        <li v-for="item in goods" class="menu-item">
          <span class="text">
            <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>1
2
3
4
5
6
7
8
9

对应的这里通过js获取dom元素的时候，写法也发生变化

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