Как сделать динамичную форму в Vue.js с использование v-for и v-model?

Question

[melishev]

Всем привет!

У меня есть VUEX, где лежат данные о том какие поля в форме должны присутствовать, вот пример:

[
    {
       Type: text,
       Name: fio,
       Title: ФИО
    },
    {
       Type: tel,
       Name: phone,
       Title: Телефон
    }
]

Каждый объект отвечает за отдельный Input, ключ Type отвечает за тип input, ключ Name отвечает за переменную в которую будут заноситься введенные данные, ключ Title отвечает за заголовок input.

Проблема:
Я сделал общую конструкцию, которую пропускаю через цикл v-for, вот пример:

<div v-for="item in Form.Data" :key="item.Name">
            <label>
                <input :type="item.Type" v-model="item.Name">
                <span>{{item.Title}}</span>
            </label>
        </div>

Проблема заключается в том, что в конечном итоге в v-model встает и меняется не Name как задумано, а item.Name. То есть он в конце концов при вводе данных в Input заносит эти данные не в Name который в свою очередь находится в Data данного компонента, а лене менять данные в Vuex у item.Name.

Как исправить или найти другой подход господа?

Comments

[Gimir]

Думаю похожая проблема

Answer 1

[Андрей Пастухов]

<input :type="item.Type" v-model="$data[item.Name]">