VueJS - Axios配列が更新されない

Question

データから宣言された配列からAPIを更新しようとしています。オブジェクトを使って配列を初期化すると、このオブジェクトはHTMLコードによく現れます。 axios呼び出しのスコープの後に配列が "保存"されていないようです。誰でも私を喜ばせることができますか？私はエラーコード/メッセージを持っていません。

var vm = new Vue({ 
el: '#recettes', 
data: { 
    results: [] 
}, 
created() { 
    axios.get('url') 
    .then((response) => { 
    this.results = response.data 
    console.log("Size before end of scope = " + this.results.length) // = 4 
    }); 
    console.log("Size after = " + this.results.length) // = 0 
} 
}); 

応答APIがある：

[ 
    { 
    "id": 1, 
    "titre": "Cassoulet", 
    "contenu": "Couper. Faire cuire...", 
    "id_util": 1 
    }, 
    { 
    "id": 2, 
    "titre": "Gateau", 
    "contenu": "chocolat", 
    "id_util": 4 
    }, 
    { 
    "id": 3, 
    "titre": "Gateau", 
    "contenu": "fraise", 
    "id_util": 5 
    }, 
    { 
    "id": 4, 
    "titre": "Gateau", 
    "contenu": "Mélanger, cuire, four 220°...", 
    "id_util": 5 
    } 
] 

テンプレート：このコードで

<div id="recettes"> 
    <div v-for="result in results"> 
     <div class="card"> 
     <div class="card-divider"> 
      {{ result.titre }} 
     </div> 
     <div class="card-section"> 
      {{ result.contenu }} 
     </div> 
     </div> 
    </div> 
    </div> 

UPDATE

var vm = new Vue({ 
    el: '#recettes', 
    data: { 
    results: [] 
}, 
created() { 
    axios.get('URL') 
    .then(response => { 
    this.results = response.data 
    console.log("size: " + this.results.length) 
    console.log('results[0]: ' + this.results[0].titre) 
    }) 
} 
}); 

、結果が[0] contaiを.titre nsは正しい文字列です。しかし、HTMLコードでは、カードは表示されません。 そして、このコードで：

var vm = new Vue({ 
    el: '#recettes', 
    data: { 
    results: [ 
     {"id" = 1, "id":1,"titre":"Cassoulet","contenu":"Couper. Faire cuire...","id_util":1} 
    ] 
}, 
created() { 
    axios.get('URL') 
    .then(response => { 
    this.results = response.data 
    console.log("size: " + this.results.length) 
    console.log('results[0]: ' + this.results[0].titre) 
    }) 
} 
}); 

1枚のカードは、力価=「カスレ」とcontenu =とHTMLで表示される「クーパーフェアcuire ...。」

私はそれがいるようだと言った理由です配列は更新されません...

Answer 1

こんにちは、これは非同期の問題だと思います。ご覧のように、javascriptは関数の終了を待つことはありません。これを試してみてください。

created() { 
    axios.get('url') 
    .then((response) => { 
    this.results = response.data 
    console.log("Size before end of scope = " + this.results.length) // = 4 
    return true; 
    }).then((response) => { 
     console.log("Size after = " + this.results.length) // = 4 
    }); 
    // console.log("Size after = " + this.results.length) // = 0 
} 

UPDATE1：あなたが見えるようにするために追加されましたフィドル

は、ここでサンプルフィドルです。 https://jsfiddle.net/khenxi/n49zj258/

Answer 2

Vueは反応性である。

リクエストが非同期なので、サイズを確認しているコードは、の前にとなり、then()の部分が実行されます。あなたのテンプレートに{{ results.length }}を置く場合、それは非常に迅速にそして04だろう、あなたはおそらくも、あなたがそれを「保存」いないという意味ではありませんログインしたときの長さは0であるという理由だけで0

でそれを見ることは決してないだろう。

あなたは、変数の長さが必要な場合は、計算されたプロパティを使用して行うことができます。

computed: { 
    resultsLength() { 
    return this.results.length 
    }, 
}