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>

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

这是我的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的

使用vuejs绑定多维数组

1 个答案: