关于axios请求数据回来,数据可以挂载却出现undefined

523 阅读1分钟

该项目是用Vue开发的,页面数据照样有,后台却报错。

原因:是因为axios请求异步操作,前端页面挂载之后才拿到后端数据的,虽然不影响正常数据但控制台会报错[Vue warn] ,看着就很难受啊,于是就有下面的几种解决方案。

  1. v-if
<img v-if="skuImageList[0]" :src="skuImageList[0].imgUrl" />

解释:先用v-if判断skuImageList[0]是否存在,存在,再渲染界面

  1. 封装判断给空值
<img :src="imgObj.imgUrl" />

在Vue的computed计算属性中留有余地,给可能的空值,如下代码

computed:{
 imgObj(){
     return this.skuImageList[0] || {}
 }
}

感谢支持!!!