专栏首页码农笔录Failed to resolve directive: el vue2报错

Failed to resolve directive: el vue2报错

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>
  • 这是使用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>
  • 对应的这里通过js获取dom元素的时候,写法也发生变化
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue项目中swiper动态更新后无法轮播问题 附带案例代码

    码农笔录
  • Android全能开源项目xUtils3开发教程、简单封装

    码农笔录
  • flutter中bottomNavigationBar切换组件保存状态方案

    我们在开发的时候用底部导航栏是很常见的,flutter给我们默认带了bottomNavigationBar,但是发现你直接这样写的时候,点击导航栏切换组建的时候...

    码农笔录
  • Vue.js点击按钮弹出隐藏菜单的几种方式

    魏晓蕾
  • 小程序-云点播

    之前在Web端用 h5connect.js 方式点播视频,现在需要移动到微信小程序中,求大佬解决帮助,急急急.... 谢谢啦!

    用户7418541
  • Objective-C的hook方案/ Method Swizzling

    Method Swizzling是改变一个selector的实际实现的技术。通过这一技术,我们可以在运行时通过修改类的分发表中selector对应的函数,来修改...

    freesan44
  • Oracle监控用户索引使用情况,删除无用索引

    注意:视具体业务情况,选择一周后,一月后,两月后(总之要保证应用的所有SQL都至少跑一遍)

    Alfred Zhao
  • springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)

    springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码) 上一篇介绍了spring boot整合mybatis实现了后端的CRUD...

    Java帮帮
  • Vue 基本指令和html常用标签结合使用综合案例(含代码)

    最近项目中要开发一个OA审批;里边涉及到流程跳转(流程较多),具体方案有:直接下一步,选择参与人或者选择某一个流程之后再选择参与人;

    yaphetsfang
  • Gridview][UpdateCommand的写法要点]

    在ASP.NET2.0中的GridView为我们浏览更新数据提供了一个方便的途径。我们只需要添...

    Java架构师必看

扫码关注云+社区

领取腾讯云代金券