Props not passed to the dynamic component

Question

I'm rendering a dynamic component:

<component :is="element.name == 'text' ? element.component : false" v-bind="elementProps"></component>

with:

computed: {
    element() {
        return {
            name: this.elementObject.type,
            component: {
                components: { TextInput },
                template: `<text-input :form-id="formId"
                                        :section-id="sectionId"
                                        :element-id="elementId"
                                        id="test2"
                            ></text-input>`
            },
        }
    },
    elementProps() {
        const props = {
            formId: this.formId,
            sectionId: this.sectionId,
            elementId: this.elementId,
            id: this.generateId()
        };
        return props;
    },
}

.. but I get an error Property or method "formId" is not defined on the instance but referenced during render. although I am passing in the props. What am I doing wrong?

Answer 1

You forgot to define the props when you create the component in the element function, try:

component: {
  components: { TextInput },
  template: `<text-input :form-id="formId"
                         :section-id="sectionId"
                         :element-id="elementId"
                         id="test2"></text-input>`,
  props: ['formId', 'sectionId', 'elementId', 'id']
},

formId, sectionId and elementId in the template have to be defined somewhere in the component either as props, data or computed property.