Как установить значение по умолчанию для динамических полей ввода в Vue.js?

Question

Я создал динамические поля ввода, но проблема в том, что я не знаю, как установить значения по умолчанию для этих динамических полей, например, число «1».Кто-нибудь может мне помочь с этим?Спасибо

Вот мой пример

new Vue({
  el: '#app',
  data: {
    result: [],
    array: [{
    	id: 1
    }, {
    	id: 2
    }, {
    	id: 3
    }]
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item, index) in array" :key="item.id">
    <input type="number" :id="item.id" v-model="result[index]">
    <br>
  </div>
  <span>Result: {{ result }}</span>
</div>

Answer 1

В соответствии с официальной документацией ,

v-модель будет игнорировать начальное значение, проверенные или выбранные атрибуты, найденные в любых элементах формы.Он всегда будет обрабатывать данные экземпляра Vue как источник правды.Вы должны объявить начальное значение на стороне JavaScript, внутри опции data вашего компонента.

Я думаю, что это дизайнерское решение Vue использовать преимущества реактивной системы экземпляра Vue, а не слушатьDOM обновляется при обновлении таких атрибутов.

Таким образом, вы можете напрямую поместить значения по умолчанию в массив result, вот обновленный рабочий jsfiddle .

Answer 2

Поскольку Vue JS реагирует, вы можете просто установить начальное значение в результате

 new Vue({
      el: '#app',
      data: {
        result: ["1","1","1"],
        array: [{
            id: 1
        }, {
            id: 2
        }, {
            id: 3
        }]
      }
    })