使用 vuejs 绑定多维数组

问题描述

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

I am building a dynamic table on my front end side, and at the end i need to know what was inserted on each cell of my table since it is editable, so i did this on my 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 模型，因此我可以将值传递给该行和列，但它不是这样工作的，我不知道如何设置.

as you guys can see. i set inside the input a v-model with items[idx1][idx2] so i can pass the value to that line and columns, it is not working like this, i don't know how to set it.

这是我的 javascript:

This is my 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"]
]

推荐答案

所以，我认为您没有正确指向模型.

So, I think you're not pointing your models correctly.

模板:

<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"]
    ];
  };
}

这是一个工作小提琴

这篇关于使用 vuejs 绑定多维数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！