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

1 ответ 1

2

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

2
  • А если изначально v-model:="gender" имеет значение, то в этом случае оно не выводит старое значение. К примеру перебор массива data , в него уже записывается значение v-model:="data.gender" 7 мая 2020 в 12:42
  • если честно, не совсем понимаю о чем речь, но если вы изначально установите newInputs: {} в newInputs: { gender: 'male' }, то оно будет выведено при первой отрисовке и будет реактивно 7 мая 2020 в 12:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.