[Vuejs]-Vue props is undefined when print component dynamically

by

1👍

✅

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.

👤skirtle

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.

👤user120242

Leave a comment