[Vuejs]-Vue 3: Each button click, generate new component and append as child in the target element

by

0👍

✅

Don’t use mount as that is designed to mount a new Vue instance. What you want to use is the <component :is="component_name"> feature and possibly have an array or other data structure containing the list of components you wish to have rendered.

For instance, consider the following simple example:

Vue.component('my-component', {
    // component config goes here, omitting for simplicity.
});

new Vue({
    el: '#app',
    data: {
        elements: []
    },
    methods: {
        addNewDiv() {
            this.elements.push({type: 'my-component'});
        }
    }
});

<div id="app">
    <component v-for="element in elements" :is="element.type"></component>
</div>

This will iterate over the elements array dynamically and will replace each instance of the <component> tag with whatever is defined by the array element.

Leave a comment