@melishev

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

Всем привет!

У меня есть 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.

Как исправить или найти другой подход господа?
  • Вопрос задан
  • 120 просмотров
Пригласить эксперта
Ответы на вопрос 1
<input :type="item.Type" v-model="$data[item.Name]">
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы