Vue-页面渲染出错解决

背景:在使用axios获取第三方网站filminfo时,在data()中创建对象来存储返回的filminfo(初始值为null),并在<template>中使用数据绑定渲染出来。结果页面加载时出现cannot read property of null。

分析:由于在页面创建渲染时所使用的数组初始值为null,同时因为axios get数据时异步的过程。因此在刚进入页面时渲染出错。

解决:在template模版中,对数据绑定所在的div使用 v-if来控制其渲染与否。即如果axios尚未返回数据,此时filminfo对象仍为null。此时div部分不进行渲染。

<template>
<!-- 列表跳转详情页面 -->
  <!-- v-if解决渲染问题 -->
  <div v-if="filminfo">
    <img class="poster" :src="filminfo.poster" />
    <h2>{{filminfo.name}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      filminfo: null
    }
  },
  props: ['id'],
  mounted () {
    // 获取传入url的id值
    axios({ ... }).then(res => {
      this.filminfo = res.data.data.film
    })
  }
}
</script>


<style lang="scss" scoped>
  .poster {
    width: 100%
  }
</style>