1.错误复现
<template>
<div>
<h1>{{info.title}}</h1>
<p>{{info.summary}}</p>
<img :src="info.images.small" alt />
</div>
</template>
<script>
export default {
name: "Detail",
data() {
return {
info: {}
};
},
async mounted() {
// http://api.douban.com/v2/movie/subject/26942674?apikey=0b2bdeda43b5688921839c8ecb20399b&callback=fn
const data = await this.$http.jsonp(
"http://api.douban.com/v2/movie/subject/" + this.$route.params.id,
{
apikey: "0b2bdeda43b5688921839c8ecb20399b"
},
{
jsonp: "callback"
}
);
this.info = data;
console.log(data);
console.log("pic:", data.images.large);
}
};
</script>
错误截图:
读取的data里是有数据的:
2. 根本原因:
我们发现这里的info是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:
异步数据先显示初始数据,再显示带数据的数据。
3.解决办法
在上面一个img中添加v-if判断条件,如果info.images取不到,则不加载该img,做一个容错处理即可解决
<img v-if="info.images" :src="info.images.small" alt />