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>

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.

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: []
    }
  },

puted: {

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

expected items array:

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

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>

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.

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: []
    }
  },

puted: {

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

expected items array:

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

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Aug 31, 2017 at 9:29 Filipe Costa asked Aug 31, 2017 at 9:18 Filipe CostaFilipe Costa 55533 gold badges1313 silver badges3232 bronze badges 4

• You need to provide html template for us to understand the problem – Nafiul Islam Commented Aug 31, 2017 at 9:21
• hehe i had it, strange it didn't place it – Filipe Costa Commented Aug 31, 2017 at 9:21
• Where are you getting tableCols or tableRows? – Nafiul Islam Commented Aug 31, 2017 at 9:25
• updated the question – Filipe Costa Commented Aug 31, 2017 at 9:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

Template:

<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>

Script:

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

Here's a working fiddle of it