質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

615閲覧

サーバサイドから取得したjsonが画面に反映されない

s-san.8

総合スコア13

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2017/07/08 17:20

###前提・実現したいこと
monaca Onsen UI V2 Vue Navigation (単一ファイルコンポーネント)でアプリを作成しております。
外部サーバーから取得した json のレスポンスデータ を配列にセットし v-for にてリストを表示したいです。

###発生している問題・エラーメッセージ

レスポンスデータが取得出来ているのはログをコンソースに出力して確認できているのですが
配列にセットした情報が画面に表示されない。

###該当のソースコード

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

Vueファイル

<template> <div> <v-ons-toolbar> <div class="center">Card</div> </v-ons-toolbar> <ons-card v-for="myData in myDatas" :key="myData.label"> <img :src="myData.url" :alt="myData.alt" style="width: 100%"> </ons-card> </div> </template> <script> export default { data: function () { return { // myDatas: this.getMyDataInfo() // myDatas: this.getMyDataInfoJsonLocal() myDatas: [], }; }, created: function() { this.getMyDataInfoJson(); }, methods: { getMyDataInfoJsonLocal() { return([ { "label": "test1", "url": "https://monaca.io/img/logos/download_image_onsenui_01.png", "alt": "alt1" }, { "label": "test2", "url": "https://monaca.io/img/logos/download_image_onsenui_01.png", "alt": "alt2" } ]); }, 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.axios.get('http://localhost:8000/debug/test.json').then((response) => { // 成功 if(response.status == 200) { //レスポンスデータが存在する場合 response.data.data.forEach((value) => { this.myDatas.push(this.getMyDataRowJson(value)); }); } else { // エラー } }, (response) => { // alert(response.status); // エラー処理 }); } } }; </script>

http://localhost:8000/debug/test.json中身

{ "data": [ { "label": "test1", "url": "https://monaca.io/img/logos/download_image_onsenui_01.png", "alt": "alt1" }, { "label": "test2", "url": "https://monaca.io/img/logos/download_image_onsenui_01.png", "alt": "alt2" } ] }

で表示されるの確認しました。
どうもtemplate直下に
<v-ons-page>
が悪さしてるっぽいです(仕様なのかバグなのかは不明ですがdivに置き換えると大丈夫のようです)

投稿2017/07/11 05:01

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rururu3

2017/07/11 05:05

Vueファイルで記述できる環境が手元にaxios使ってる環境しかなかったのでaxiosでjson取得してるコードなので手元の環境のに修正していただければと思います。
s-san.8

2017/07/11 06:11

ご回答いただきありがとうございました! ご案内いただいた内容で画面表示されました! 非同期処理だったので、処理順が保証されてないんかな?とか 深みにハマっていっておりました・・ この度は、アドバイスいただき、本当にありがとうございました! ものすごく助かりました! また、色々、参考にさせていただきます! ありがとうございました。
guest

0

getMyDataInfoJson
this.$http
ってたぶん非同期処理なので、VueJS処理においてdata取得の際にデータがまだ無く反映されないと思います。

data () { return { myDatas: [], }, }

にして、this.$httpのthen処理で実際にthis.myDatas.pushとかでデータを入れていけば以下かでしょうか。

何度も追記してすいません、

<div v-for="myData of myDatas" :key="myData.label" style="width: 50%; float: left;">

ofではなくinでは

<div v-for="myData in myDatas" :key="myData.label" style="width: 50%; float: left;">

投稿2017/07/10 01:53

編集2017/07/10 02:01
rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shika358

2017/07/10 05:50

補足ですが > this.$httpのthen処理で実際にthis.myDatas.pushとかでデータを入れていけば に加えてCreatedのタイミングなどで、getMyDataInfoJson()を呼び出せば大丈夫だと思います。 また、v-forはinでもofでも2.xからOKです。 https://jp.vuejs.org/v2/guide/list.html#基本的な使い方
rururu3

2017/07/10 06:27

おお、ofでもいいんですね・・・ありがとうございます!
s-san.8

2017/07/11 02:30 編集

ご回答ありがとうございます!また、色々、アドバイスありがとうございます! ご案内いただいている内容も踏まえて色々試しているのですが 中々、上手くいきません。 monaca デバッガーのコンソール出力をしながらデバッグをしており this.myDatas.push 等の後、myDatas にもデータが入っている事を確認しております。 手書きで this.myDatas.push した場合のコンソールログは以下の通りです。 [Object, Object] json の取得結果から this.myDatas.push した場合のコンソールログは以下の通りです。 [Object, Object] ただ1点気になったのが、以下を試してみたところ 手書きの場合は正常に件数が表示されますが json の場合は「TypeError: Cannot read property 'length' of undefined」が出ます。 配列として認識されていないのですかね? <template> <v-ons-page> {{myDatas.length}} </v-ons-page> </template> 引続き、アドバイスいただけましたら助かります。 よろしくお願いいたします。
rururu3

2017/07/11 04:51

ちゃんと記載していますコードで確かに表示されないのがわかりました&解決策もわかりましたので別解で記載いたします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問