環境
javascriptフレームワーク:vue
クロスプラットフォーム:onsen ui
html
1 <component 2 v-for="category in allCategories" 3 :is="CategoryIndexPage" 4 :key="category.id" 5 :title="category.title" 6 :image="category.image" 7 PropsWidth="25" 8 :page-stack="pageStack" 9 class="all-category" 10 ></component>
js
1import JoinCategory from '../Category/components/JoinCategory' 2import MenuPage from './MenuPage' 3import CategoryIndex from '../Category/Index' 4export default { 5 name: 'home', 6 props: ['pageStack'], 7 data () { 8 return { 9 title: 'title', 10 CategoryIndexPage: CategoryIndex, 11 JoinCategoryPage: JoinCategory, 12 allCategories: [ 13 { 14 id: 0, 15 image: 'block.jpg', 16 title: 'hogehoge' 17 } 18 ] 19 } 20 }, 21 created: function () { 22 this.allCategories.push({ id: 10, title: 'hoge', image: 'block.jpg' }) 23 const self = this 24 var listSet = [] 25 this.axios 26 .get(process.env.BASE_URL + 'all_category') 27 .then(function (res) { 28 listSet = res.data 29 self.categoryListUpdate(listSet) 30 }) 31 }, 32 methods: { 33 categoryListUpdate (listSet) { 34 for (var i = 0; i < listSet.length; i++) { 35 var items = listSet[i] 36 this.allCategories.push({ id: items.id, title: items.title, image: items.image }) 37 } 38 console.log(this.allCategories) 39 } 40 }
上記のようなデータがあったとします。
やりたいこととしては、axiosで取得したデータをv-for回して結果に表示することです。
まず、挙動を確認すると、created直下のpushはビューにちゃんと反映されていることは確認しました。
一方、axiosで取得したデータはビューに反映されていませんでした。
ただ、methodsにあるconsole.logにはちゃんと表示されていました。
おそらくレンダリングが向こうになっている可能性があると思い、createdをmountedに変えてみたら、今度は一行目のpush(idが10のもの)もビューに反映されていませんでした。
マウントしたあと、pushでビューに結果を更新するために必要な作業、また足りていない部分は何になるでしょうか?
長くなりましたが、もしわかりましたらご教授お願いします。
追記:コンポーネント側からconsole.logしてみたら、ちゃんとaxiosのデータが渡っていることは確認できました。
html
1 <component 2 v-for="category in allCategories" 3 :is="CategoryIndexPage" 4 :key="category.id" 5 :title="category.title" 6 :image="category.image" 7 :categoryAll="category.title" 8 PropsWidth="25" 9 :page-stack="pageStack" 10 class="all-category" 11 ></component>
categoryAllを追加
js
1 mounted: function () { 2 console.log(this.categoryAll) 3 }
categoryAll内でサーバーのデータを表示されていることを確認
ただ、画面の更新(だけ)がされていない状態です…]
追記:別プロジェクトで、nuxtで実験してみたところ、うまく行きました!
ただ、onsen uiの方は相変わらずうまく行っていないです…
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。