Когда создается экземпляр Vue, он добавляет все свойства, найденные в его data
объекте, в систему реактивности Vue
. Когда значения этих свойств изменятся, представление будет «реагировать», обновляясь, чтобы соответствовать новым значениям.
Следует отметить, что свойства в data
являются реактивными, только если они существовали при создании экземпляра (здесь имеется ввиду непосредственно дочерние свойства объекта data
). Это означает, что если вы добавите новое свойство, то изменения этого свойства не будут запускать какие-либо обновления просмотра. Если вы знаете, что вам понадобится свойство позже, установить какое-либо начальное значение этому свойству
Информация из официального руководства - Экземпляр Vue
Учитывая вышеизложенное, создаете пустое свойство в data
data: {
newInputs: {}
}
проходите по вашему массиву и создаете разметку с реактивными обработчиками и прилагающими:
<div v-for="item in inputs">
<label for="name">{{ item['v-model'] }}</label>
<input v-model="newInputs[item['v-model']]" type="text" id="name" required>
</div>
Пример для наглядности:
const app = new Vue({
el: "#app",
data: {
newInputs: {},
inputs: [{
type: 'text',
'v-model': 'name',
},
{
type: 'text',
'v-model': 'age'
},
{
type: 'text',
'v-model': 'gender',
}
]
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div>
<div v-for="item in inputs">
<label for="name">{{ item['v-model'] }}</label>
<input v-model="newInputs[item['v-model']]" type="text" id="name" required>
</div>
</div>
<div>
<pre>{{ newInputs }}</pre>
</div>
</div>