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中显示为空：

但是组件呈现正确：

组件内部的道具也一样：

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

由于所有属性都消失了，因此，如果我尝试配置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
    ])
])

我认为影响模板的因素是此map语句：

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变量时，您可能会触发一个观察者，这可能会清除父对象中的数据。

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

VueJS组件中的对象为空

1 个答案: