【vue偶遇bug】vue请求axios异步加载数据前渲染报错解决方案
结果就是如上的报错内容,百度了好久没找到解决方案,最后debugger了一下发现可以是初始的数据渲染报错,尝试过将组件放到beforeMount中初始化,可是axios接口返回的数据时间并不确定。在接口返回数据成功之后,初始化组件,发现mounted之后会更新完毕dom节点,同样axios接口返回数据的时间不确定,无法更改组件的位置。进行判断,这样可以判断该组件是否被添加,在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>
更多推荐
已为社区贡献5条内容
所有评论(0)