Invalid prop: type check failed for prop "formConfiguration". Expected Object, got Null

[abhimanusharma]

Form is rendering but, getting below error in console.

app.js:193236 [Vue warn]: Invalid prop: type check failed for prop "formConfiguration". Expected Object, got Null 

found in

---> <FormRenderer>
       <FormShareable> at resources/js/components/FormShareable.vue
         <App> at resources/js/App.vue

My code is:

<template>
    <div class="md-layout justify-content-center">
        <div class="md-layout-item md-size-50 md-medium-size-100 m-auto md-card">
            <FormRenderer
                :form-configuration="formData"
            />
        </div>
    </div>
</template>

<script>
    import {FormRenderer} from 'v-form-builder';
    import 'v-form-builder/dist/v-form-builder.css';

    export default {
        name: "FormShareable",
        props:["app", "selectedForm"],
        components: {
            FormRenderer,
            LoadingButtonLoader,
        },
        data: () => ({
            formInputData: null,
            formData: null,
            submitData: false
        }),
        created() {
           axios.get('api/getform'+id).then(response => {
              this.formData = JSON.parse(response.data.Form.form_data.data);
           }
        },
}
</script>

[sethsandaru]

Hello @abhimanusharma ,

I believe the warning message said it all: Expected Object, got Null. Could you please try to use the Vue-Devtool to see the exact data from your component?

And I do believe if you set the object like this: this.formData = ... => Not reactive. To re-set an object, best thing we should do is using $set of Vue, example here: https://vuejs.org/v2/guide/reactivity.html#For-Objects

        created() {
           axios.get('api/getform'+id).then(response => {
              this.$set(this, 'formData', JSON.parse(response.data.Form.form_data.data));
           }
        },

[abhimanusharma]

From vue-devtool this is the exact data:

{"formConfig":{"headline":"Form Xt","subHeadline":null,"isShowHeadline":true,"renderFormTag":false,"formActionURL":null,"formMethod":"POST"},"sections":{"section-6d781ff0-0017-4a36-82cb-e950a1241f0b":{"uniqueId":"section-6d781ff0-0017-4a36-82cb-e950a1241f0b","headline":"First sec","headlineAdditionalClass":null,"subHeadline":"Section starts","subHeadlineAdditionalClass":null,"isShowHeadline":true,"sortOrder":1,"type":"normal","rows":[],"controls":["control-e2a6636f-b4da-4e44-b65a-075ece47175c"]}},"rows":[],"controls":{"control-e2a6636f-b4da-4e44-b65a-075ece47175c":{"uniqueId":"control-e2a6636f-b4da-4e44-b65a-075ece47175c","type":"text","name":null,"label":"Address","subLabel":null,"isShowLabel":true,"placeholderText":null,"containerClass":"col-md-6 md-layout-item md-size-50","additionalContainerClass":null,"additionalFieldClass":null,"additionalLabelClass":null,"defaultValue":null,"validations":[],"rows":3}}}

For both this.$set(this, 'formData', JSON.parse(response.data.Form.form_data.data)); and this.formData = JSON.parse(response.data.Form.form_data.data);

Error remains the same.

[sethsandaru]

Thanks for the info, let me test it to see what's the problem

[sethsandaru]

This is my test result (used your form data above). No error was shown.

I do believe the retrieving data of your process is behind the warning error. Please kindly check it again.

[sethsandaru]

It's been 3 days without any comments. I would like to close this issue. If you have any further detail or issue related to this, feel free to reopen it. Thanks