Question

基本上我已经制作了proyxy-component，它根据:type的内容呈现不同的组件，并且效果很好。关键是我创建了一个表单控件的模式和一个单独的数据对象，其中存储了表单控件中的数据。一切都运行良好但我在formData对象包含嵌套对象时遇到问题。

在我的示例test.test1

中

如何根据字符串的内容生成v-model值动态。

My Compoennt

<proxy-component
                v-for="(scheme, index) in personSchema.list"
                :key="index"
                :type="scheme.type"
                :props="scheme.props"
                v-model="formData[personSchema.prefix][scheme.model]"
                v-validate="'required'"
                data-vv-value-path="innerValue"
                :data-vv-name="scheme.model"
                :error-txt="errors.first(scheme.model)"
></proxy-component>

数据

data() {
            return {
                selectOptions,
                formData: {
                    person: {
                        given_names: '',
                        surname: '',
                        sex: '',
                        title: '',
                        date_of_birth: '',
                        place_of_birth: '',
                        nationality: '',
                        country_of_residence: '',
                        acting_as: '',
                        test: {
                            test1: 'test',
                        },
                    },
                },
                personSchema: {
                    prefix: 'person',
                    list: [
                        {
                            model: 'given_names',
                            type: 'custom-input-component',
                            props: {
                                title: 'Name',
                            },
                        },
                        {
                            model: 'surname',
                            type: 'custom-input-componentt',
                            props: {
                                title: 'Surname',
                            },
                        },
                        {
                            model: 'test.test1',
                            type: 'custom-input-component',
                            props: {
                                title: 'test 1',
                            },
                        },
                        {
                            model: 'sex',
                            type: 'custom-select-component',
                            props: {
                                title: 'Sex',
                                options: selectOptions.SEX_TYPES,
                                trackBy: 'value',
                                label: 'name',
                            },
                        },
                    ],
                },

            };
        },

Answer 1

我认为不可能直接使用v-model，你可以看看：

https://vuejs.org/v2/guide/reactivity.html

也许最好的解决方案是使用手表（deep: true）作为解决方法。（我会先尝试在formData[personSchema.prefix][scheme.model]中使用监视属性。）

Answer 2

我建议你写一个vue-method（在数据部分下），它返回v-model的对象

v-model="resolveObject(formData[personSchema.prefix][scheme.model])" 要么 v-model="resolveObject([personSchema.prefix] , [scheme.model])"

在那里你可以处理点符号并返回正确的嵌套属性。

使用点表示法字符串生成有效的v模型值作为数据的对象引用

2 个答案: