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

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

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

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

修改前：

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

修改后：

不仅 v-e l改成了 ref menuWrapper 不用中间再用 - 隔开

v-el: menu-wrapper → ref=”menuWrapper”

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

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

修改前:

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

修改后:

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

还可以移步官方手册：

API-ref
组件—子组件引用

发表评论

表情：
评论列表 （有 0 条评论，1700人围观）

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

相关阅读