vue.js display json data

Question

store

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
    })
  }
}

I wanna show some message on my page, like summary, but the chrome Dev tools console the 'Error in render function: "TypeError: Cannot read property 'summary' of null" ',

I tried.

Egor Stambakio · Accepted Answer · 2017-05-02 08:10:30Z

2

Set a guard to prevent render before items are fetched:

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

answered May 2, 2017 at 8:10

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

WUSO01 Over a year ago

Yes, the chrome dev tools doesn't console the error, but the page is nothing,

Collectives™ on Stack Overflow

vue.js display json data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related