How to add components to vue on click

Question

So I have a page with a button. When this button is clicked I would like text to appear, and everytime the button is clicked I would like the text to appear like this:

This is my code:

<v-row>
    <component
    v-for="(component, index) in components"
    :key="index"
    :is="component"/>
</v-row>

<v-row justify="left" class="ml-3">
    <v-btn class="elevation-7 grey darken-1 btn" @click="add">Click me</v-btn>
</v-row>

<script>
import Vue from 'vue'
Vue.component('component', {
        template: '<p>component</p>'
    })

export default {
        data: () => {
            return {
                components: [Comp]
            };
        },

        methods: {
            add: function () {
                this.components.push(Comp)
            }
        }
}
</script>

Yet when I click the button nothing appears? I would really appreciate some help as I do not understand this.

UPDATE

I checked console and I am seeing this:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

This error then points to this.components.push(Comp) . In vue.config.js I added runtimeCompiler: true yet this error still persists and the text does not appear.

This is all done on vuejs + electron.

try this example : codesandbox.io/s/condescending-williams-56jnb?file=/src/App.vue — Chunbin Li
– Chunbin Li, Commented Aug 25, 2021 at 1:33

tony19 · Accepted Answer · 2022-07-16 01:16:29Z

1

It seems like you are using vue2.

Because the compiler is not included in runtime-only builds, you have to set an alias for vue.

    // if you are using webpack
    build: {
        extend(config, ctx){
            config.resolve.alias['vue'] = 'vue/dist/vue.common';
        }
    },
    
    // if you are using vite
    vite: {
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.common'
            }
        },
    }

for more details, please view the docs: Runtime + Compiler vs. Runtime-only

edited Jul 16, 2022 at 1:16

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 25, 2021 at 1:22

DengSihan

3,0862 gold badges23 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add components to vue on click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related