如何在单击时将组件添加到vue

Question

所以我有一个带有按钮的页面。单击此按钮时，我希望出现文本，每次单击按钮时，我希望文本显示如下：

这是我的代码：

<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>

但是当我点击按钮时什么也没有出现？非常感谢您的帮助，因为我不明白这一点。

更新

我检查了控制台，我看到了这个：

[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.components.push(Comp)。在 vue.config.js 中我添加了 runtimeCompiler: true 但是这个错误仍然存在并且文本没有出现。

这都是在vuejs + electron上完成的。

Answer 1

你好像用的是vue2.

因为编译器不包含在仅运行时构建中，所以您必须为 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'
            }
        },
    }

更多详情，请查看docs: Runtime + Compiler vs. Runtime-only

如何在单击时将组件添加到vue

How to add components to vue on click

javascript

vue.js

electron