前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Failed to resolve directive: el vue2报错

Failed to resolve directive: el vue2报错

作者头像
码农笔录
发布2018-06-29 17:46:08
2K0
发布2018-06-29 17:46:08
举报
文章被收录于专栏:码农笔录

vue2报错 Failed to resolve directive: el

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

  • 之前v-el的写法
代码语言:javascript
复制
<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这种写法了
代码语言:javascript
复制
<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元素的时候,写法也发生变化
代码语言:javascript
复制
this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年07月02日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue2报错 Failed to resolve directive: el
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档