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

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

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

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