I have a page with a button that, when clicked, should display text. Each time the button is clicked, the text should appear as follows:
https://i.sstatic.net/dGDsv.gif
Below is the code I am using:
<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>However, when I click the button, nothing appears. I would appreciate some help as I'm having trouble understanding what's not working.
UPDATE
Upon checking the console, I noticed the following error message:
[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 seems to be pointing towards this.components.push(Comp). Despite adding runtimeCompiler: true to vue.config.js, the error persists and the text remains invisible. This issue is occurring within a vuejs + electron environment.