В v-model вывести значения элемента из массива

Question

        inputs: [{
            type: 'text',
            v-model: 'name',
            }, 
           {
            type: 'text',
            v-model: 'age'
            }, 
           {
            type: 'text',
            v-model: 'gender',
          }],

Как перебрать массив, чтоб записать в v-model название из элемента массива На выходе хочу получить такую запись

<input v-model:="name" type="text">
<input v-model:="age" type="text">
<input v-model:="gender" type="text">

Answer 1

Когда создается экземпляр 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>

БЛОГ НА HUSL

В v-model вывести значения элемента из массива

Ответы (1 шт):