对象在 VueJS 组件中为空

Question

我正在尝试在 VueJS 中构建一个应用程序，其中我有一个类似这样的组件：

<template>
    <div>
        <base-subheader title="Members" icon="la-home" heading="Member Details" description="Home"></base-subheader>
        <div class="m-content">
            <div class="row">
                <div class="col-xl-6">
                    <nits-form-portlet
                            title="Add Member/User"
                            info="Fill the details below to add user, fields which are mandatory are label with * (star) mark."
                            headIcon="flaticon-multimedia"
                            headerLine
                            apiUrl="api/user"
                            backUrl="members__home"
                            action="create"
                            :formElements="form_elements"
                    >
                    </nits-form-portlet>
                </div>
                <div class="col-xl-6">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "member-add",
        data() {
            return {
                form_elements: [
                    {
                        field_name: 'first_name',
                        config_elements: {
                            label: 'First Name *',
                            type: 'text',
                            inputStyle: 'pill',
                            placeholder: 'Enter first name of user',
                            formControl: true,
                            addonType: 'left-icon',
                            addon: {leftAddon: 'la-exclamation'},
                        },
                        value: '',
                        nitsFormType: 'nits-input'
                    },
                    {
                        field_name: 'last_name',
                        config_elements: {
                            label: 'Last Name',
                            type: 'text',
                            inputStyle: 'pill',
                            placeholder: 'Enter last name of user',
                            formControl: true,
                            addonType: 'left-icon',
                            addon: {leftAddon: 'la-exclamation'},
                        },
                        value: '',
                        nitsFormType: 'nits-input'
                    },
                    {
                        field_name: 'email',
                        config_elements: {
                            label: 'Email *',
                            type: 'email',
                            inputStyle: 'pill',
                            placeholder: 'Enter email of user',
                            formControl: true,
                            addonType: 'left',
                            addon: {leftAddon: '@'},
                        },
                        value: '',
                        nitsFormType: 'nits-input'
                    },
                    {
                        field_name: 'password',
                        config_elements: {
                            label: 'Password *',
                            type: 'password',
                            inputStyle: 'pill',
                            placeholder: 'Enter password',
                            formControl: true,
                            addonType: 'left-icon',
                            addon: {leftAddon: 'la-expeditedssl'},
                        },
                        value: '',
                        nitsFormType: 'nits-input'
                    },
                    {
                        field_name: 'confirm_password',
                        config_elements: {
                            label: 'Confirm Password *',
                            type: 'password',
                            inputStyle: 'pill',
                            placeholder: 'Confirm password should match',
                            formControl: true,
                            addonType: 'left-icon',
                            addon: {leftAddon: 'la-expeditedssl'},
                        },
                        value: '',
                        nitsFormType: 'nits-input'
                    },
                    {
                        field_name: 'role',
                        config_elements: {
                            label: 'Select Role *',
                            inputStyle: 'pill',
                            options: [
                                {option: 'Select one'},
                                {value: '1', option: 'Admin'},
                                {value: '2', option: 'Subscriber'},
                                {value: '3', option: 'Analyst'},
                                {value: '4', option: 'Guest'}
                            ],
                            addonType: 'left-icon',
                            addon: {leftAddon: 'la-user-secret'},
                        },
                        value: '',
                        nitsFormType: 'nits-select'
                    },
                    {
                        field_name: 'profile_pic',
                        config_elements: {
                            label: 'Profile pic',
                        },
                        value: '',
                        nitsFormType: 'nits-file-input'
                    }
                ],
            }
        }
    }
</script>

<style scoped>

</style>

每当我尝试将数据传递给我的组件 config_elements 时，它会丢失所有传递给子组件的属性的对象，如果我从其他组件移动到 nits-form-portlet>，它会适当地呈现子组件，但在我的Vue-debug tool 显示为空：

但组件渲染正确：

组件内部的 props 也是如此：

但如果发生任何事件或刷新它显示的页面：

由于所有属性都消失了，如果我尝试配置我的 config_elements 对象数据，我会获得属性，但在几分之一秒内它又会变空。但是属性被传递并显示字段：

我正在使用渲染函数来渲染这些组件，所以对于 nits-form-portlet 组件我有：

return createElement('div', { class: this.getClasses() }, [
    createElement('div', { class: 'm-portlet__head' }, [
        createElement('div', { class: 'm-portlet__head-caption' }, [element])
    ]),
    createElement('form', { class: 'm-form m-form--fit m-form--label-align-right' }, [
        createElement('div', { class: 'm-portlet__body' }, [
            createElement('div', { class: 'form-group m-form__group m--margin-top-10' }, [infoElement]),
            this.computedFormElements.map(a => {
                if(this.error[a.field_name]) {
                    a.config_elements.error = this.error[a.field_name][0];
                    return createElement(a.nitsFormType, { attrs: a.config_elements, on: {
                        input: (event) => {
                            this.form[a.field_name] = event
                        }
                    }})
                }
                else
                    return createElement(a.nitsFormType, { attrs: a.config_elements, on: {
                        input: (event) => {
                            this.form[a.field_name] = event
                        }
                    }})
            })
        ]),
        footerElement
    ])
])

我认为影响模板的因素是这个地图声明：

this.computedFormElements.map(a => {
    if(this.error[a.field_name]) {
        a.config_elements.error = this.error[a.field_name][0];
        return createElement(a.nitsFormType, { attrs: a.config_elements, on: {
            input: (event) => {
                this.form[a.field_name] = event
            }
        }})
    }
    else
        return createElement(a.nitsFormType, { attrs: a.config_elements, on: {
            input: (event) => {
                this.form[a.field_name] = event
            }
        }})
})

但我仍然在分享我的整个渲染函数代码，Link to code @ github 希望有人能帮助我解决这种奇怪的情况。

Answer 1

如果不运行代码，对我来说有点难以判断，但我注意到了一些可能相关的东西。

我看到你在这里覆盖了 formElements 属性：

a.config_elements.error = this.error[a.field_name][0];

Vue 通常会给你一个警告，你不能这样做，但可能是因为它是通过计算抽象出来的，所以它没有这样做。

如果您想扩展数据以在子组件中使用，那么最好对对象进行复制（最好使用计算的深度复制，这将允许您动态更新它）

因为config_elements 是一个对象，所以当您添加error 变量时，您可能会触发一个观察者，这可能会清除父对象中的数据。

无论如何，这只是一个猜测，但您可能还是想解决一些问题。