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

不念不忘少年蓝@ 2022-05-29 09:38 1648阅读 0赞

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

这是因为 v-el 在 Vue2.x 以后被淘汰。使用新的标签 ref 替换 v-el，下面是修改的方法。

修改前：

<div class="menu-wrapper" v-el:menu-wrapper>
        <ul>
            <li v-for="item in goods" class="menu-item">
                <span class="text border-1px">
                    <icon v-show="item.type > 0" :speciesType="item.type" :type="3"></icon>{
       {item.name}}
                </span>
            </li>
        </ul>
    </div>

修改后：

> 不仅 v-e l改成了 ref menuWrapper 不用中间再用 - 隔开  
>   
> **v-el: menu-wrapper → ref="menuWrapper"**

<div class="menu-wrapper" ref="menuWrapper">
        <ul>
            <li v-for="item in goods" class="menu-item">
                <span class="text border-1px">
                    <icon v-show="item.type > 0" :speciesType="item.type" :type="3"></icon>{
       {item.name}}
                </span>
            </li>
        </ul>
    </div>

后面js的引用写法也发生了改变:

修改前:

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

修改后:

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

还可以移步官方手册：

[API-ref][]  
[组件—子组件引用][Link 1]

[API-ref]: https://cn.vuejs.org/v2/api/#ref
[Link 1]: https://cn.vuejs.org/v2/guide/components.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E5%BC%95%E7%94%A8

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 vue报错Failed to mount component

背景： vue项目今天前正常运行，早上打开电脑，并没有编辑代码，直接刷新了下页面。今日，在运行vue项目时，突然页面出不来，打开控制台，报以下错误： ![20200120

古城微笑少年丶/ 2023年07月01日 08:39/ 0 赞/ 28 阅读

相关 Failed to resolve directive: el vue2报错

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

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

相关 Vue 报错 Failed to resolve filter

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

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

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

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

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

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

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

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

相关 Failed to resolve directive: link报错

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

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

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

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

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

相关 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 赞/ 539 阅读

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

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

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