vue.js 如何将值建模为单独的数组

【问题标题】：vue.js how to v-model values as separate arraysvue.js 如何将值建模为单独的数组
【发布时间】：2018-11-16 07:38:26
【问题描述】：

从后端我得到一个这样的数组。

然后我将这个数组渲染到这样的表中

我的代码

<tr v-for="item in items">
                <td>
                    {{item[1]}}
                </td>
                <td>
                    {{item[2]}}
                </td>
                <td>
                    <input type="text" v-model="grnItems[items[1]]"/>
                </td>
            </tr>

这是一个购买退货组件

我想要的是 v-model 这每个输入元素作为一个单独的数组以及项目名称。

喜欢这个

 [
    ["chicken","12"]
    ["chille","19"]
]

如何使用 vue.js 实现这一点？

【问题讨论】：

v-model 中的grnItems 是什么？

标签： vue.js vuejs2 v-for

【解决方案1】：

使用辅助数组以您想要的方式填充数据，一些使用计算属性的示例

new Vue({
  el: '#app',
  data: {
    items: [['1', 'some text', '66'], ['2', 'another text', '12'], ['5', 'random text', '89']],
    result: []
  },
  computed: {
    procesedItems() {
      return this.items.map(i => ({
        id: i[0],
        name: i[1],
        amount: i[2]
      }))
    }
  },
  methods: {
    doSomething() {
      this.result = this.procesedItems.map(i => {
        let aux = [];
        
        aux.push(i.name, i.amount)
        return aux
      })
    }
  }
})

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


<div id="app">
  <ul>
    <li v-for="item in procesedItems"> {{item.id }} {{item.name }} <input v-model="item.amount"/></li>
  </ul>
  <button @click="doSomething">Calculate</button>
  {{ result }}
</div>

【讨论】：