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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1821閲覧

vue.js,vuexでaxiosでデータを取得後に画面描写できない

sdice

総合スコア12

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/08/17 15:22

前提・実現したいこと

実現したいことは「vue.js」「vuex」構成にて、「Axios」でデータを取得後に「storeのstate」に取得データを格納後、componentへ取得データを表示したいです。
下記ソースにて実行したのですが、画面上にはなにも表示されません。
画面描写と情報の取得と格納の順番が前後してうまく表示できてない様に思えるのですが、対応方法などアドバイス頂ければと考えております。

試したこと

問題がAPI側にあったり、「store」の定義にないか確認する為にデータ取得後に「console.log」で「store」の「state」情報を確認しましたが、API上から取得されたデータが表示されるのでstore格納までは行えている様に思えます。

store定義

JavaScript

1const store = new Vuex.Store({ 2 state: { 3 detail: '初期化' 4 }, 5 mutations: { 6 setDetail(state, payload) { 7 state.detail = payload 8 } 9 }, 10 actions: { 11 getDetail({dispatch}) { 12 return axios.get('http://localhost:8000/api/detaile/',{}) 13 }, 14 }, 15 getters: { 16 detail(state) { return state.detail } 17 } 18})

component(XXXX.vue)定義

JavaScript

1<template> 2<div>{{detail}}</div> 3</template> 4 5<script> 6export default { 7 name: 'listcard', 8 props: ['post'], 9 data () { 10 return { 11 msg:{} 12 }, 13 computed: { 14 detail() { 15 this.$store.dispatch('getDetail').then((res)=>{ 16 this.$store.commit('setDetail', res.data ) 17 var detail = this.$store.state.detail 18 // データが格納され、「store」の「state」に格納されているか確認 19 console.log(detail) 20 return detail; 21 }); 22 } 23 } 24} 25</script> 26

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

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

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

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

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

guest

回答1

0

ベストアンサー

computed の detail 関数自体が何も return していないので 表示されないのだと思います。 (then の中で returnしていますがそれは detail関数の戻り値になるわけでないです。)

computed でやりたい理由は不明ですが、 Vue.js の公式にものってるように、 mounted で APIを叩いて、データを取得/セットするようにして、それをtemplateの中で参照するのが良いと思います。 もしくは template の中で直接 stateを参照しても良いと思います。

https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

下記のようなイメージです。(動作確認はしていません)

<template> <div>{{ detail }}</div> </template> <script> export default { name: 'listcard', props: ['post'], data () { return { msg:{}, detail: '' } }, mounted () { this.$store.dispatch('getDetail').then((res)=>{ this.$store.commit('setDetail', res.data ) this.detail = this.$store.state.detail return; }) } } </script>

投稿2018/08/17 17:17

tell_k

総合スコア2120

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

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

sdice

2018/08/17 17:54

的確な説明ありがとうございました。 全く仰る通りの対応で動作を確認することができました。 上記リンク先にデータ変更時はライフサイクルの「mounted」を使用する様に記載されていますね。 確認不足で本当にお恥ずかしい限りです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問