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 />