プログラミング

[nuxt.js] storeのactionsの中でrouter.pushを使う方法 (way to access router.push in vuex store)

nuxt.jsのstoreのactionsの中でvuerouterのpushを使う方法がネット上に見当たらなかったので、ネットにある情報（このへん）  とか（このへん）とかを調べてもうまくいかない・・・巨大ハマりポイントがありました。... 続きを読む

[javascript] JSONとかのkey-valueオブジェクトの配列から特定のkeyの値だけ取り出して配列にまとめたい（スプレッド演算子とmap()）

javascriptでオブジェクトの配列から特定のkeyだけ取り出して配列にまとめたい時

例えば、サーバーからユーザー情報をAPIでJSONで取り出してきました。以下のようなJSONがあったとします。このJSONから、useridだけ取り出したい。よくある処理だけど、毎回ループ書くのは面倒。... 続きを読む

vue.js コンポーネントをAPI通信後に非同期で読込、動的に切り替える方法

vue.jsでAPIを叩いて、そのデータを子コンポーネントに注入する際、コンポーネントを初期配置するとデータが受け渡しされません。v-ifディレクティブでAPI通信が終わったタイミングで表示する方法もありますが、動的コンポーネントを使えば以下のようにコンポーネントを遅延配置できます。

このコードで記述すれば、APIの通信結果によって使うコンポーネントを切り替えることも可能です。例えば正常時は表示系コンポーネント、エラー時はエラー表示のコンポーネントを表示させる、など。

続きを読むvue.js コンポーネントをAPI通信後に非同期で読込、動的に切り替える方法