###前提・実現したいこと
monaca Onsen UI V2 Vue Navigation (単一ファイルコンポーネント)でアプリを作成しております。
外部サーバーから取得した json のレスポンスデータ を配列にセットし v-for にてリストを表示したいです。
以前も質問させていただき
<v-ons-page> を使わなければ画面表示が行える旨、ご案内いただきました。
上記で、継続して開発を行っているところ、Navigation の機能が使えない等の問題もあり
改めて、質問させていただきます。
###発生している問題・エラーメッセージ
レスポンスデータが取得出来ているのはログをコンソースに出力して確認できているのですが
配列にセットした情報が画面に表示されない。
###該当のソースコード
axios_http.js
import axios from 'axios'; const http = axios; export default (Vue) => { Vue.http = http; Object.defineProperties(Vue.prototype, { $http: { get () { return http; } } }); };
main.js
import Vue from 'vue'; import VueOnsen from 'vue-onsenui'; import http from './axios_http.js'; import 'onsenui'; // Onsen UI Styling and Icons require('onsenui/css-components-src/src/onsen-css-components.css'); require('onsenui/css/onsenui.css'); import App from './App'; Vue.use(http); Vue.use(VueOnsen); new Vue({ el: '#app', template: '<app></app>', components:{App} });
App.vue
<template> <v-ons-navigator :page-stack="pageStack"> <component :is="page" v-for="page in pageStack" :page-stack="pageStack"></component> </v-ons-navigator> </template> <script> import page1 from './Page1'; import page2 from './Page2'; export default { data() { return { pageStack: [page1] } } } </script>
Page1.vue
<template> <v-ons-page> <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> </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>
###試したこと
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>
今回、最新版のmonaca Onsen UI V2 Vue Navigation でも確認しましたが
同様の現象で、画面に表示出来ておりません。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー