###前提・実現したいこと
monaca Onsen UI V2 Vue Navigation (単一ファイルコンポーネント)でアプリを作成しております。
外部サーバーから取得した json のレスポンスデータ を配列にセットし v-for にてリストを表示したいです。
###発生している問題・エラーメッセージ
レスポンスデータが取得出来ているのはログをコンソースに出力して確認できているのですが
配列にセットした情報が画面に表示されない。
###該当のソースコード
<template> <v-ons-page></v-ons-page> </template> <script> export default { data () { return { // myDatas: this.getMyDataInfo() myDatas: this.getMyDataInfoJson() }; }, methods: { getMyDataRow(i) { return { label: '', url: "http://xxxxxxx/" + i + ".jpg", alt: "画像" + i }; }, getMyDataInfo() { const data = []; for (let i = 1; i < 3; i++) { data.push(this.getMyDataRow(i)); } return data; }, getMyDataRowJson(my_data) { return { label: my_Data.label, url: my_data.url, alt: my_data.alt }; }, getMyDataInfoJson() { const data = []; var myDataInfo = []; var myDataCnt = 0; this.$http.get('http://xxxxxxx/').then((response) => { // 成功 if(response.data.status == 200){ myDataInfo = response.data.my_Data; myDataCnt = myDataInfo.length; //レスポンスデータが存在する場合 if(myDataCnt != 0){ for (let i = 0; i < myDataCnt; i++) { data.push(this.getMyDataRowJson(response.data.my_Data[i])); } } // エラー }else{ } }, (response) => { // alert(response.status); // エラー処理 }); return data; } } }; </script><div v-for="myData of myDatas" :key="myData.label" style="width: 50%; float: left;"> <v-ons-card> <img :src="myData.url" :alt="myData.alt" style="width: 100%"> </v-ons-card> </div>
###試したこと
json と同様のフォーマットの手書き配列を 同一ファイル内のfunction getMyDataInfo() で返した場合
画面には反映されました。
json レスポンスの場合に画面に反映されません。
json レスポンスの場合でも以下の件数表示は正常に行えます。
{{myDatas.length}}
配列にデータが入っている事はコンソールでも確認済みなのですが
以下の処理が行われておりません。
<div v-for="myData of myDatas" :key="myData.label">
<v-ons-card>
<img :src="myData.url" :alt="myData.alt" style="width: 100%">
</v-ons-card>
</div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/11 05:05
2017/07/11 06:11