VueJS: Как создать значение v-модели внутри массива объектов

Question

У меня есть несколько полей ввода, например:

<input type=text" v-model="InputVModel1">
<input type=text" v-model="InputVModel2">

, и я хочу поместить эти значения v-модели в массив объектов, например:

array = [{id:1,value:InputVModel1},{id:2,value:InputVModel2},..]

Что такое лучший способ достичь этого? Использовать ли $ set в вычисленном значении для 'pu sh' в массив, например:

    computed: {
        computed_array: function(){ 
            object= {"id":1,"value":InputVModel1}
            this.$set(this.array, object) //push them with a for loop
            [..]
        }
    }

Или есть более элегантный способ сделать это?

Фон : Я хочу использовать окончательный массив для vuedraggable, чтобы изменить порядок объектов, сохраняя при этом другие важные метаинформации для каждого значения.

Answer 1

new Vue({
  el: '#app',
  
  data: {
    list: [
      { id: 1, value: 'foo' },
      { id: 2, value: 'bar' },
      { id: 3, value: 'baz' } 
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div
    v-for="(record, i) in list"
    :key="i"
  >
    {{ record.id }}
    <input v-model="record.value"/>
    {{ record.value }} <!-- To check if value key is updating in the list -->
  </div>

</div>

PS: используйте list (окончательный массив) с для vue-draggable.