CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Georgi Antonov
Georgi Antonov

Reputation: 1641

Generate valid v-model value using dot notation string as object reference to the data

Basically i've made proyxy-component which renders different components based on what the :type is and it works great. The point is that I create a schema of the form controls and a separate data object where the data from the form controls is stored. Everything is working good but i have a problem when formData object contains nested objects.

In my example test.test1

How can i make the v-model value dynamic which is generated based on what the string is.

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

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',
                            },
                        },
                    ],
                },

            };
        },

Upvotes: 1

Views: 2265

Answers (2)

kimuraz
kimuraz

Reputation: 31

I don't think it's possible directly with v-model, you can take a look at:

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

Maybe the best solution would be use a watch (deep: true) as a workaround. (I would try first to use watch properties inside formData[personSchema.prefix][scheme.model].)

Upvotes: 1

reinerBa
reinerBa

Reputation: 1660

I would recomment you to write a vue-method (under the data section) that returns the object for v-model

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

There you can do handle the dot-notation and return the proper nested property.

Upvotes: 1

Related Questions