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

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

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

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

358閲覧

【Vuex】APIで取得したデータを表示できない

matsuo_basho

総合スコア88

Vue.js

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

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2021/07/27 08:23

いつも大変お世話になっております。
久しぶりのVueを利用したシステムを開発しており手こずっております。

APIで取得したデータをstoreのmutations経由でstateに格納したのですが、
html側で取得したデータを表示することができません。

厳密にはhtml側にオブジェクト型のデータは渡っているのですが、
多次元構造のオブジェクトになっており、深い階層のデータを表示することができません。

例えば下部に掲載しているApp.vueのソースコードに

pickedDataLiving : this.$store.getters.selectPickedItems.living

とあるのですが、

pickedDataLiving : this.$store.getters.selectPickedItems

だと表示は可能ですが、.livingが付いていると表示ができなくなります。

前回も同じようなことで質問をさせていただいたのですが、
いまいち、なぜそのようなことになってしまうのかというのが理解ができず
再度質問をさせていただく運びとなってしまいました。

お詳しい方がいらっしゃればご教授いただけますと幸いです
それではどうぞ宜しくお願い致します。

ソース

javascript

1// store/index.js 2 3import { createStore } from 'vuex' 4import axios from 'axios' 5 6export default createStore({ 7 8 state : { 9 10 // actionsのfetchPlanで取得したデータを以下に格納し、html側に表示させたい 11 selectPickedItems : { 12 "living" : [] 13 } 14 15 }, 16 17 getters : { 18 selectPickedItems : (state) => state.selectPickedItems 19 }, 20 21 mutations : { 22 23 setPlan : (state, { plan }) => { 24 25 // selected === true のもののみ、state.selectPickedItems に格納 26 state.selectPickedItems.living = plan.acf.living.filter(i => i.selected === true) 27 28 } 29 30 }, 31 32 actions : { 33 34 async fetchPlan({ commit }, { id }){ 35 36 const url = `https://localhost:8890/wp-json/wp/v2/plan/${id}/`; 37 const planRowData = await axios.get(url) 38 const plan = planRowData.data 39 40 if( !plan.id ) throw new Error('Invalid Post.') 41 42 commit('setPlan', { plan }) 43 44 } 45 46 } 47 48}) 49
// App.vue <template> <div> ※ Vuex側の state.selectPickedItems.living のデータを表示させたい <p>pickedDataLiving</p> {{ pickedDataLiving }} </div> </template> <script> import { mapActions } from "vuex"; export default { name : 'Plan', data(){ return { pickedDataLiving : this.$store.getters.selectPickedItems.living } }, created(){ this.fetchPlan({ id : 846 }); }, watch : { // 今回のteratailの質問では利用しません // pickedDataLiving : function(){ // this.$store.commit('setSelectPickedItems', { // selectType : "living", // selectPickedItems : this.pickedDataLiving // }) // } }, methods : { ...mapActions([ 'fetchPlan' ]) } } </script> <style lang="scss" scoped> h1{ font-weight : bold; font-size : 2rem; margin-bottom : 30px; } h2{ margin-bottom : 20px; } .ppp{ display : flex; align-items : flex-start; justify-content : space-between; } .bbb{ label{ text-align : center; border : 3px solid #000; padding : 15px; display : block; width : 320px; margin-bottom : 12px; } input{ display : none; &:hover + label{ color : #fff; border : 3px solid #000; background : #000; } &:checked + label{ color : #fff; border : 3px solid #000; background : #000; } } } </style>

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問