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

Bertha 。 2021-10-09 03:28 524阅读 0赞

## 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, {})

发表评论取消回复

表情：

评论列表（有 0 条评论，524人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue报错：Module not found: Error: Failed to resolve ‘less-loader‘

问题： ![fca095d21f44f38640ae4010235e7fe2.png][] 错因： lang="less"代表支持less语法格式。报上述错说明未配置

梦里梦外;/ 2024年03月26日 19:46/ 0 赞/ 71 阅读

相关 Vue 启动项目报错 Failed to compile with 2 errors

Failed to compile with 2 errors 说的是编译失败，出现2个错误 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

水深无声/ 2022年12月14日 03:51/ 0 赞/ 374 阅读

相关 Failed to resolve directive: el vue2报错

vue2报错 Failed to resolve directive: el 为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的

喜欢ヅ旅行/ 2022年06月13日 07:54/ 0 赞/ 251 阅读

相关 Vue 报错 Failed to resolve filter

![Center][] 原因: filter 顺序问题: 先定义过滤器, 再新建 vue 实例原代码: ![Center 1][]

刺骨的言语ヽ痛彻心扉/ 2022年06月05日 05:26/ 0 赞/ 221 阅读

相关 Vue2报错解决方案：Failed to resolve directive: el

Vue在更新到2.x版本后更改了很多的api，这对很多按着Vue1.x课程学习的同学来说比较麻烦，经常报出各种各样的错误。这次我们遇到的报错是:Failed to resolv

不念不忘少年蓝@/ 2022年05月29日 09:38/ 0 赞/ 1633 阅读

相关 Vue便以项目出现Failed to resolve directive: link

问题描述在router-view外面引用的组件(比如导航栏), v-link 指令不起作用，无法跳转，会报错：Failed to resolve directive: li

男娘i/ 2022年05月21日 05:27/ 0 赞/ 346 阅读

相关 Failed to resolve directive: link报错

[https://blog.csdn.net/shaleilei/article/details/79181269][https_blog.csdn.net_shaleilei

- 日理万妓/ 2022年04月17日 00:59/ 0 赞/ 306 阅读

相关报错：[Vue warn]: Failed to resolve filter: formatDate

使用Vue的时候突然报错这个，\[Vue warn\]: Failed to resolve filter: formatDate ![在这里插入图片描述][waterma

朱雀/ 2022年01月06日 10:55/ 0 赞/ 549 阅读

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

vue2报错 Failed to resolve directive: el 为什么会报这个错呢，主要还是因为vue升级的时候，v-el在vue2.x以后被淘汰。使用新的

Bertha 。/ 2021年10月09日 03:28/ 0 赞/ 525 阅读

相关 [Vue warn]: Failed to resolve directive: Show

\[Vue warn\]: Failed to resolve directive: Show 1.错误截图 2.错误分析 3.此类问题解决办法 1

分手后的思念是犯贱/ 2021年09月28日 12:22/ 0 赞/ 313 阅读