Когда я использую динамические переменные для моей v-модели, она не работает

Question

Итак, у меня есть простая форма:

<template v-for="form in forms">
    {{ form.header }}
    <template v-for="input in form.inputs">
        <label>{{ input.label }}</label>
        <v-flex class="xs12 md6">
            <input :v-model="input.key" />
        </v-flex>
    </template>

</template>

, которая динамически создается из объекта данных форм:

forms:[
    {
        header: 'General Information',
        description: 'General Information',
        inputs: [
            {
                label: 'First name',
                key: 'account.firstname'
            },
        ]
    }

У меня есть предварительно созданный объект учетной записи дляv-модель:

data: () => ({
    account: {
        firstname: 'Initial firstname'
    }
})

Но это не работает.Я не получаю ошибок, но моя динамическая v-модель не получает данные account.firstname.Чего мне не хватает, чтобы это исправить?

Answer 1

Гораздо проще не хранить точечную запись в такой строке. Сначала оберните ваши группы данных (т. Е. account и все братья и сестры) в родительский объект, например mydata:

mydata: {
  account: {
    firstname: 'Initial firstname'
  }
  ... // Other model groups
}

Добавить свойство к вашему входу для группы данных:

group: 'account',
key: 'firstname'

И измените свой шаблон на:

<input v-model="mydata[input.group][input.key]" />

Обратите внимание, что в вашем v-model также произошла синтаксическая ошибка, предшествующей привязки не должно быть :.