How to make a dynamic form in Vue.js using v-for and v-model?

Question

Vue.js

Hello!

I have VUEX, where there is data about which fields in the form should be present, here is an example:

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

Each object is responsible for a separate Input, the Type key is responsible for the input type, the Name key is responsible for the variable into which the entered data will be entered, the Title key is responsible for the input header.

Problem:
I made a general construct that I run through a v-for loop, here is an example:

<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>

The problem is that in the end, in the v-model, it is not Name that gets up and changes as intended, but item.Name. That is, in the end, when entering data into Input, it enters this data not into Name, which in turn is in the Data of this component, but rather to change the data in Vuex for item.Name.

How to fix or find another approach gentlemen?

Answer 1

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