Failed to resolve directive: el vue2报错

码农笔录

发布于 2018-06-29 09:46:08

2K00

代码可运行

文章被收录于专栏：码农笔录码农笔录

运行总次数：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>

这是使用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, {})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017年07月02日，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

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

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

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

vue.js

登录后参与评论

0 条评论

热度

Failed to resolve directive: el vue2报错

Failed to resolve directive: el vue2报错

vue2报错 Failed to resolve directive: el

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐