2017-05-02 21 views
2

json datavue.js表示JSONデータ

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

私は要約のように、私のページにいくつかのメッセージを表示したいが、クロムのDevツールは、コンソール'レンダリング関数のエラー: "TypeError:ヌルのプロパティ' summary 'を読み取れません' '、

私は試しました。項目の前にレンダリング防ぐためにガードを設定し

答えて

2

がフェッチされる:

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

はい、クロムのdevのツールは、エラーコンソールませんが、ページが何もありません、 – WUSO01