Как динамически добавить компонент Vuejs в DOM

Question

Я хочу добавить компонент Vue в DOM, когда в раскрывающемся списке выбран параметр, поэтому он динамически отображается

Код, который я пробовал, выглядит следующим образом

var html = "<component :is=\"dynamickeyvalue\"></component>";
$('#extraOptionsElements').html(html);

в любом случае есть возможность загрузить компонент vue, когда он добавлен, поскольку все, что я сейчас получаю, пусто.

Answer 1

Я использовал тег component для динамической загрузки компонента.Нажатие кнопки имитирует функцию смены компонента.

<template>

    <button 
        @click="changeComponent()"
    >Click me to change component</button>

    <component 
        :is="theSelectedComponent"
    ></component>

</template>

<script>
import Component1 from '@/components/Component1'
import Component2 from '@/components/Component2'
import Component3 from '@/components/Component3'
export default {
    components: {
        Component1,
        Component2,
        Component3
    },
    data () {
        return {
            theSelectedComponent: 'Component1'
        }
    },
    methods: {
        changeComponent () {
            if (this.theSelectedComponent === 'Component1') {
                this.theSelectedComponent = 'Component2'
            } else if (this.theSelectedComponent === 'Component2') {
                this.theSelectedComponent = 'Component3'
            } else {
                this.theSelectedComponent = 'Component1'
            }
        }   
    }
}
</script>