VueJS：如何在对象数组中创建 v-model 值

Question

我有几个这样的输入字段：

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

我想将这些 v-model 值放在对象数组中，如下所示：

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

实现这一目标的最佳方法是什么？ 是否在计算值中使用 $set 将它们“推送”到数组中，例如：

    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。