[Vuejs]-Create dynamic row-column table grid in Vue.js

Edit based on comments:

There is nothing wrong with using forEach(). For readability I would suggest using two methods that describe what you are using in each step. If you wanted to use another array method you could chain .map() but it’s essentially doing the same thing

methods: {
    setRecords(){
        this.records = this.rows.map(row => ({
           row: row,
           details: this.columns.map(column => ({
              column: column,
              value: 0
           }))
        }))
      }
  }

Original:

I would suggest simplifying records to [ {colName: value, ...}, ...] then looping over columns within the table row

Table Row:

<tr v-for="(record, rowIndex) in records" :key="rowIndex">
    <td>{{record.row}}</td>
    <td v-for="(col, index) in columns" :key="index">
        <input type="text" v-model="record[col]">
    </td>
</tr>

From your data you can format records usingmounted() { this.records = this.rows.map(row => this.columns.reduce((acc, col) => ({...acc, ...{[col]: 0}}), {}))}