javascript - 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:无法读取 null 的属性“摘要”””，

我试过了。

Answer 1

设置一个防护以防止在获取项目之前进行渲染:

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