用 vuejs 绑定多维数组

Question

我正在前端构建一个动态表格，最后我需要知道表格的每个单元格中插入了什么，因为它是可编辑的，所以我在我的 html 上做了这个：

 <table class="table table-responsive">
    <tbody>
      <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}">
        <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="items[idx1][idx2]" type="text" class="borderTbl" value="HEY"/></td>
      </tr>
    </tbody>
  </table>

如你们所见。我在输入中设置了一个带有 items[idx1][idx2] 的 v-model，所以我可以将值传递给该行和列，它不是这样工作的，我不知道如何设置它。

这是我的javascript：

export default {
  name: 'app',
  data () {
    return {
      table: {
        rows: 1,
        cols: 1,
        key: 'Table',
        tableStyle: 1,
        caption: '',
        colx: []
      },
      hasHeader: true,
      hasCaption: true,
      insert: 1,
      idx2: 1,
      items: []
    }
  },

计算：{

tableStyles () {
  return this.$store.getters.getTableStyles
},
tableRows () {
  return parseInt(this.table.rows)
},
tableCols () {
  return parseInt(this.table.cols)
}

预期项目数组：

items:[
   ["john","Micheal"]
   ["john","Micheal"]
   ["john","Micheal"]
   ["john","Micheal"]
]

Answer 1

所以，我认为您的模型指向不正确。

模板：

<tr v-for="(row, idx1) in items">
    <td class="table-success" v-for="(col, idx2) in row">
        <input v-model="items[idx1][idx2]" type="text" />
    </td>
</tr>

脚本：

data () {
  return {
    items:[
     ["john","Micheal"],
     ["john","Micheal"],
     ["john","Micheal"],
     ["john","Micheal"]
    ];
  };
}

这是其中的working fiddle