vue.js 显示 json 数据

Question

json data

商店

filmDetails: {}
......
getFilmDetail (context, param) {
     axios.get(API.filmDetails + param.id)
      .then(response => {
        context.commit('FILM_DETAILS', response.data)
      })
      .catch(err => {
        console.log(err)
      })
  }

.vue

<template>
  <section>
    <div v-for="item in filmDetails">
      <p>{{item.summary}}</p>
    </div>
  </section>
</template>
......
export default {
  name: 'detail',
  computed: {
    ...mapState(['filmDetails'])
  },
  mounted () {
    let _id = this.$route.params.id
    this.$store.dispatch('getFilmDetail', {
     id: _id
    })
  }
}

我想在我的页面上显示一些消息，例如摘要，但是 chrome 开发工具控制台显示“渲染函数中的错误：“TypeError: Cannot read property 'summary' of null”'，

我试过了。

Answer 1

设置保护以防止在获取项目之前渲染：

<template>
  <section v-if="filmDetails && filmDetails.length">
    <div v-for="item in filmDetails">
      <p>{{item.summary}}</p>
    </div>
  </section>
</template>