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 将 'push' 这些放入数组中，如：

    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。

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

VueJS: How to create v-model value inside object array

vue.js

object

v-model