当前位置:网站首页 / 技术杂谈 / 正文

vue2.0使用v-el出现问题

时间:2019年06月14日 | 作者 : 张端建 | 分类 : 技术杂谈 | 浏览: 167次 | 评论 0

前言:在仿做饿了吗项目页面滚动效果时,用到了better-scroll插件,进行到获取DOM时出现问题

问题描述:

为goods页面添加页面滚动效果出现错误:

[Vue warn]: Failed to resolve directive: el

原因:

在Vue2.0中已经弃用了v-el,v-rel指令

解决:

使用ref属性为元素或组件添加标记,然后通过this.$refs获取

代码:

goods.vue

//template
ref="menu-wrapper"
ref="foods-wrapper"

//script
this.menuScroll = new BScroll(this.$refs.menuWrapper,{});
this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{});

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例;

官网:https://cn.vuejs.org/v2/api/#ref

又出现一个问题:

can not reslove the wrapper dom

原因:

命名规范不对,,应该使用驼峰命名法。

更改如下:

ref="menuWrapper"

ref="foodsWrapper"

成功执行。


完整源代码:

goods.vue

<template>
    <div class="goods">
         <div class="menu-wrapper" ref="menuWrapper">  //第一处
             <ul>
                 <li v-for="(item,index) in goods" v-bind:key="index" class="menu-item">
                     <span class="text border-1px">
                         <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                     </span>
                 </li>
             </ul>
         </div>
          <div class="foods-wrapper" ref="foodsWrapper">  //第二处
              <ul>
                  <li v-for="item in goods" class="food-list">
                      <h1 class="title">{{item.name}}</h1>
                      <ul>
                          <li v-for="food in item.foods" class="food-item border-1px" >
                              <div class="icon">
                                  <img width="57" height="57" :src="food.icon" alt="">
                              </div>
                              <div class="content">
                                  <h2 class="name">{{food.name}}</h2>
                                  <p class="desc">{{food.description}}</p>
                                  <div class="extra">
                                      <span class="count">月售{{food.sellCount}}份</span>
                                      <span>好评率{{food.rating}}%</span>
                                  </div>
                                  <div class="price">
                                      <span class="now">¥{{food.price}}</span>
                                      <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </li>
              </ul>
          </div>
      </div>
</template>

<script>
    import BScroll from 'better-scroll';
    const ERR_OK = 0;
export default {
  props: {
      seller: {
          type:Object
    }
},
data(){
    return{
        goods:[]
    };
},
created() {
    this.classMap = ['decrease','discount','special','invoice','guarantee'];
    this.$http.get('/api/goods').then((response)=>{
        response=response.body;
        if(response.errno===ERR_OK){
            this.goods=response.data;
            //vue异步读取数据,需要加载完数据再进行调用
            this.$nextTick(()=>{        //第三处
                //初始化滚动条
                this._initScroll();
            });
        }
    });
},
    methods: {     //第四处
        _initScroll() {
            this.menuScroll = new BScroll(this.$refs.menuWrapper,{});
            this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{});

        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
    ……                    
</style>

推荐您阅读更多有关于“v-elvue2.0饿了吗,”的文章

请在这里放置你的在线分享代码

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。