Vue props is undefined when print component dynamically

Question

My problem is on the dynamically creation of the TAG "galeriaimages". Vue works fine but the props are always undefined

thanks for all.

main.js

import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', function() {
    new Vue({vuetify, render: h => h(Gi) }).$mount('galeriaimages');
});

HTML

<galeriaimages p1="awesome" /> <!-- I create it dinamically-->

Vue component

<script>

export default {
    props: ['p1'] ,
    data: function() {
        return {
        }
    },
    created: function() {
        alert(this.p1); //this is always undefined
    }
}

Thanks to @skirtle for give me the answer :-)

I added this line in my vue.config.js

runtimeCompiler: true

...and all works fine

The prop you have there is bound to the root element. You didn't provide the props to the Gi component — user120242, Apr 17 '20 at 07:52
Is there a reason you are not making use of the template syntax, and using render function directly? — user120242, Apr 17 '20 at 07:55

skirtle · Accepted Answer · 2020-04-17T08:32:12.947

The bit where you write h(Gi) is creating a galeriaimages component but not passing any props to it.

To pass the prop you would need to write:

new Vue({
  vuetify,
  render: h => h(Gi, {props: {p1: 'awesome'}})
}).$mount('galeriaimages');

However, I suspect that isn't what you're really trying to do.

You currently seem to be mounting directly to the <galeriaimages> element, which is a bit odd but if you remove the render function it should work. You can also use el instead of $mount:

new Vue({
  vuetify,
  components: {galeriaimages: Gi},
  el: 'galeriaimages'
});

I would add that the reason most examples use a render function for the root Vue instance is that it avoids the need to include the template compiler in the Vue build. This only works if all your other Vue components are pre-built .vue files. If you have any templates at runtime, including those in your HTML, then you'll need to include the template compiler anyway. In that scenario there's no benefit to using a render function on the root instance.

After applying you fixes...returns: 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. — Erik Basañez, Apr 17 '20 at 14:41
@ErikBasañez Yep, that's what I was referring to in the last paragraph of my answer. See https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only for more information. You either need to switch to a build that includes the compiler, or use the `render` function version I suggested. If you're using the CLI then you can enable the compiler using `runtimeCompiler: true` in your `vue.config.js`, see https://cli.vuejs.org/config/#runtimecompiler — skirtle, Apr 17 '20 at 15:27

score 0 · Answer 2 · answered Apr 17 '20 at 08:21

0

You need to provide the component matching the tag <galeriaimages>. Your custom render function is overriding the template parsing, so it is not parsing the <galeriaimages> as a component tag.

    new Vue({vuetify, components: {galeriaimages: Gi} }).$mount('galeriaimages');

Also your components are not creating any elements. They are not able to mount.

answered Apr 17 '20 at 08:21

user120242

14,918
3
38
52

I have changed my code apllying your fixes. Return: 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. – Erik Basañez Apr 17 '20 at 14:39

Vue props is undefined when print component dynamically

2 Answers2