Vueで動的にコンポーネントを追加する方法

今回、webアプリを作成しているのですが、その時にクリックされたらコンポーネントを追加する方法がわからなかったので、備忘録として残しておきたいと思います。

作成したコードの方では、バリデーションもできるように記述してあるのですが、わからない方にとってはバリデーションの部分が邪魔になるかと思いますので、今回はバリデーション部分は無い状態にしようと思います。

開発環境

• MaOS
• VSCode
• vue.js 2.x
• vue/cli 4.5.13
• Bootstrap-vue

参考記事

Dynamically adding different components in Vue
今回はこちらの記事を参考にさせていただきました。

方法

まずは親のコンポーネントからですね。

Parent.vue

<template>
    <div>
        <Children></Children>
        <component v-for="field in fields" v-bind:is="field.type" v-bind:key="field.id"></component>
        <b-button block type="button" v-on:click="addForm('Children')" class="border-0" style="background-color: rgba(191, 202, 63, 0.99);">観光地を追加</b-button>
    </div>
</template>

<script>
import Children from '../components/Children.vue'

export default {
    data: () => ({
        fields: [],
        count: 0
    }),
    components: {
        Children,
    },
    methods: {
        addForm: function(type) {
        this.fields.push({
            type: type,
            id: this.count++
        });
        }
    }
}
</script>

続いて子のコンポーネントになります。

Children.vue

<template>
    <div>
        <b-row class="justify-content-end d-flex mt-3 mb-3">
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="移動手段">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="所要時間">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="3">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="料金">
                    </b-form-input>
                </b-form-group>
            </b-col>
        </b-row>
        <b-row>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="観光地">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="滞在時間">
                    </b-form-input>
                </b-form-group>
            </b-col>
            <b-col cols="4">
                <b-form-group>
                    <b-form-input
                        type="text"
                        placeholder="料金">
                    </b-form-input>
                </b-form-group>
            </b-col>
        </b-row>
    </div>
</template>

解説

解説をしていきたいと思います。

子のコンポーネント

子のコンポーネントでは、いつも通りコンポーネントを作成するだけですね。

親のコンポーネント

次に親のコンポーネントの説明です。

①まず、dataに空のリストfiledsを作成します。
②次に観光地を追加ボタンがクリックされたら、fieldsの中に、子のコンポーネントとIDを追加するようにします。
③<component>タグを用意して、その中でv-forを回して、クリックされた分だけ子のコンポーネントを表示するようにします。

is属性

is属性はコンポーネントを動的に切り替える時に使用されるみたいです。

僕の勝手な理解では、<component>タグの<>内に入ってくるコンポーネント名をisに入れていくのかなと思っております。

まとめ

日本語で記事が出てこない場合は、英語で調べるのも一つの手だなと思いました。
同じような部分でつまづいている方の助けになれば幸いです。

また、今度バリデーションありの投稿もしたいと思います。