前提・実現したい
Monaca の Onsen UI V2 Vue Navigation テンプレートでアプリを開発しています。
サーバーから取得した json 形式のデータを v-for で繰り返し表示したいです。
発生している問題・エラーメッセージ
{{ items }}
でレスポンスデータ全件が表示されることは確認したのですが、
v-for のループ内では全く表示されません。
該当のソースコード
Page1.vue
js
1<template> 2 <v-ons-page> 3 {{ items }} 4 5 <li v-for="item in items"> 6 <v-ons-link @click="push(item.url)"> 7 {{ item.title }} 8 </v-ons-link> 9 </li> 10 </v-ons-page> 11</template> 12 13<script> 14 import customToolbar from './CustomToolbar'; 15 import page2 from './Page2'; 16 import axios from 'axios'; 17 18 export default { 19 data() { 20 return { 21 items: [] 22 } 23 }, 24 created() { 25 axios.get('https://xxxxxxxx.json') 26 .then(response => {this.items = response.data;}) 27 .catch(error => {console.log(error);}); 28 }, 29 methods: { 30 pop(){ 31 this.pageStack.pop(); 32 }, 33 push(url) { 34 this.pageStack.push({ 35 extends: page2, 36 data() { 37 return { 38 url: url 39 }; 40 } 41 }); 42 } 43 }, 44 props: ['pageStack'], 45 components: { customToolbar }, 46 key: 'key_page1', 47 } 48</script>
試したこと
data() 内の items 変数を以下のように書き換えると、配列に定義したデータ件数分だけ v-for が動作し、
以下の例だと3件分のデータが表示されるようになりました。
data() { return { items: [1,2,3] } },
アドバイスをいただけますと幸いです。よろしくお願いいたします。
あなたの回答
tips
プレビュー