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

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

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

動的コンポーネントのサンプルコード

<template lang="pug">
component(:is="component" v-bind="componentProps")
</template>
<script type="ts">
import Vue from 'vue'
// 1.利用するコンポーネントを指定
import UseComponent from '~/components/使う子コンポーネント.vue'
export default Vue.extend({
  data() {
    return {
      // 動的componentに受け渡すリアクティブなデータの定義
      component: null,
      componentProps: null
    }
  },
  async created() {
    await APIアクセス的なもの()
    // コンポーネント属性を設定
    this.componentProps = {
      data: APIから受け取ったデータ
    }
    // コンポーネントを配置
    this.component = UseComponent
  }
})
</script>

ポイント

component(:is=”component” v-bind=”componentProps”)

このタグを追加することで、コンポーネントを動的に配置できます。isディレクティブにはコンポーネント名、またはimportしたコンポーネントを指定します。

v-bindでコンポーネントに渡したいプロパティをまとめてオブジェクトにして渡してあげます。

このサンプルでは使うコンポーネントを固定していますが、APIの通信結果によってコンポーネントを切り替えることも可能ですね。例えば正常時は表示系コンポーネント、エラー時はエラー表示のコンポーネントを表示させる、など。

コメントする