Vue.js jsonを消費する

Question

この問題は私の問題です。 http://dev-rexolution.pantheonsite.io/api/noticias

は私だけで、配列の最初の要素は、私が働いていたコンソールではなく無vuejsと協力して、それを表示することができるようにvuejs 2を消費する必要があります。

このコンソールログの作業：console.log（response.data [0] .title [0] .value）;

<template> 
    <div class="Box Box--destacado1"> 
    <div class="Media Media--rev"> 
     <div class="Media-image"> 
      </div> 
       <div class="Media-body"> 
       <span class="Box-info">{{ noticias[0].field_fecha[0].value}}</span> 
       <h3 class="Box-title"> 
       <a href="">{{ /*noticias[0].title[0].value */}}</a> 
       </h3> 
       <p class="Box-text">{{/*noticias[0].field_resumen[0].value*/}}</p> 
       </div> 
      </div> 
</template> 

<script> 
import axios from 'axios'; 

export default { 
    data:() => ({ 
    noticias: [], 
    errors: [] 
    }), 

    // Fetches posts when the component is created. 
    created() { 
    axios.get(`http://dev-rexolution.pantheonsite.io/api/noticias`) 
    .then(response => { 
     // JSON responses are automatically parsed. 
     this.noticias = response.data 
    }) 
    .catch(e => { 
     this.errors.push(e) 
    }) 
    } 
} 
</script> 

Answer 1

あなたはおそらく、あなたのテンプレートは、AJAXリクエストが完了するまで存在していないデータを表示しようとしている問題に実行しています。

私は、データが利用可能であることを示すフラグを設定し、v-ifを使用して表示を切り替えるでしょう。例えば

テンプレート

<div class="Media-body" v-if="loaded"> 

スクリプト

data() { 
    loaded: false, 
    noticias: [], 
    errors: [] 
} 

とあなたのcreatedフック代わり

.then(response => { 
    this.loaded = true 
    this.noticias = response.data 
}) 

---

では、あなたの最初のnoticias配列を設定いくつかのダミーデータを含む

noticias: [{ 
    title: [{ value: null }] 
    field_fecha: [{ value: null }] 
    field_resumen: [{ value: null }] 
}]