vue数据没有获取到

Question

用v-if判断commends.length 就显示el没有获取到，是什么原因啊

代码如下：

<div class="recommend">

    <div class="recommend-content">

        <div v-if="recommends.length" class="slider-wrapper">

            <slider>

                <div v-for="item in recommends">

                    <a :href="item.linkUrl">

                        <img :src="item.picUrl" alt="">

                    </a>

                </div>

            </slider>

        </div>

        <div class="recommend-list">

            <h1 class="list-title">热门歌单推荐</h1>

            <ul></ul>

        </div>

    </div>

</div>

js代码

export default {

  data() {

    return {

      recommends: []  //这里应该有值的啊

    };

  },

  created() {

    this._getRecommend();

  },

  methods: {

    _getRecommend() {

      getRecommend().then(res => {

        if (res.code === ERR_OK) {

          console.log(res.data.slider);

          this.recommends = res.data.slider;

        }

      });

    }

  },

  components: {

    Slider

  }

};

封装方法

 export function addClass(dom, className){

        if(hasClass(ele,className)){

            return 

        }

        let newClass = ele.className.spilt(' ');

        newClass.push(className);

        ele.className = newClass.join(' ');

    }

    

    export function hasClass(ele, className){

        let reg = new RegExp('(^|\\s)'+className+'(\\s|$)');

    

        return reg.test(ele.className)

    }

Answer 1

生命周期图示created:挂载没开始，$el属性不可见

Answer 2

方法封装在 methods内