【vue偶遇bug】vue请求axios异步加载数据前渲染报错解决方案

vue请求axios异步加载数据前渲染报错解决方案

在使用VueSlickCarousel走马灯组件组件时，进行数据渲染的过程中会出现初始化数据渲染的问题，报错.length并没有

期待实现的效果：

初始代码

  <VueSlickCarousel v-bind="settings1">
                    <div v-for="(item,index) in homeBgImg" :key="index" v-cloak>
                        <img :src="item.pic" :alt="item.topText">
                    </div>
 </VueSlickCarousel>
 <script>
 var vue = new Vue({
    el: "#classificationBigBox",
    data: {
     	homeBgImg:"",
    },
    methods: {
       
        handlet() {
       
            axios.get(getApiUrl("jiekou")).then(res => {
                this.homeBgImg= res.data.data.list;

            }).catch(error => {
                error_msg(error);
            });

        },
        }
})
</script>

结果就是如上的报错内容，百度了好久没找到解决方案，最后debugger了一下发现可以是初始的数据渲染报错，尝试过将组件放到beforeMount中初始化，可是axios接口返回的数据时间并不确定。在接口返回数据成功之后，初始化组件，发现mounted之后会更新完毕dom节点，同样axios接口返回数据的时间不确定，无法更改组件的位置。

解决方案

在VueSlickCarousel 标签中添加v-if进行判断，这样可以判断该组件是否被添加，在axios数据请求完毕之后再次进行组件的加载，如此便可以实现初始化数据的渲染使用问题

<VueSlickCarousel v-bind="settings1" v-if="homeBgImg.length!==0">
                  <div v-for="(item,index) in homeBgImg" :key="index" v-cloak>
                      <img :src="item.pic" :alt="item.topText">
                  </div>
</VueSlickCarousel>
<script>
var vue = new Vue({
  el: "#classificationBigBox",
  data: {
   	homeBgImg:"",
  },
  methods: {
     
      handlet() {
     
          axios.get(getApiUrl("jiekou")).then(res => {
              this.homeBgImg= res.data.data.list;

          }).catch(error => {
              error_msg(error);
          });

      },
      }
})
</script>