[Vuejs]-How to store inputs form grid into vector/object (javascript, vue)

by

0👍

✅

You can add a Watcher in the number of rows and columns and add them as needed:

new Vue({
  el: '#app',
  data() {
    return {
      grid: [
        {"0": 111, "1": 555},
        {"0": 222, "1": 666}
      ],
      nRows: 2,
      nColumns: 2
    }
  },
  methods: {
    updateGrid() {
      for (let c = 0; c < this.nColumns; c++) {
        if (!this.grid[c]) {
          this.grid[c] = {};
        }
        for (let r = 0; r < this.nRows; r++) {
          if (!this.grid[c][r]) {
            this.grid[c][r] = null;
          }
        }
      }
    }
  },
  watch: {
    nRows() {
      this.updateGrid();
    },
    nColumns() {
      this.updateGrid();
    },
  }
})
input { width: 50px }
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h2>Grid 2</h2>
  <p>Adjust grid size:&nbsp
    <label>Columns <input type="number" v-model.number="nColumns" /></label>
    <label>Rows <input type="number" v-model.number="nRows" /></label>
  </p>
  <table>
    <tr v-for="(row, r) in nRows" :key="r">
      <td v-for="(column, c) in nColumns" :key="c" v-if="grid[c] !== undefined && grid[c][r] !== undefined">
        {{r}}{{c}}: <input type="number" v-model.number="grid[c][r]" /> &nbsp
      </td>
    </tr>
  </table>
</div>

Notice also the added v-if="grid[c] !== undefined && grid[c][r] !== undefined" this is for Vue not try to access grid[c][r] while grid[c] is undefined, which would throw an error and halt it all.

0👍

HTML

<div id="app">
<h2>Grid 2</h2>
<p>Adjust grid size:&nbsp;
  <label for="cols">Columns </label><input id="cols" v-on:change="adjustGrid" type="number" v-model.number="nColumns"/>
  <label for="rows">Rows </label><input id="rows" v-on:change="adjustGrid" type="number" v-model.number="nRows" />
</p>
<table>
      <tr v-for="row, r in grid">
        <td v-for="cell, c in row">{{r}}{{c}}:&nbsp;<input type="number" v-model.number="cell.value" />
        </td>
      </tr>
</table>
</div>

SCRIPT

new Vue({
    el: "#app",
    data: {
        nRows: 5,
        nColumns: 3,
        grid: [
            [{ value: 0 }, { value: 1 }, { value: 2 }],
            [{ value: 0 }, { value: 1 }, { value: 2 }],
            [{ value: 0 }, { value: 1 }, { value: 2 }],
            [{ value: 0 }, { value: 1 }, { value: 2 }],
            [{ value: 0 }, { value: 1 }, { value: 2 }]
        ]
    },
    methods: {
        adjustGrid: function(event) {
            while (this.grid.length < this.nRows) {
                this.grid.push([]);
            }
            while (this.grid.length > this.nRows) {
                this.grid.pop();
            }
            for (var r = 0; r < this.grid.length; r++) {
                var row = this.grid[r];
                while (row.length < this.nColumns) {
                    row.push({ value: 0});
                }
                while (row.length > this.nColumns) {
                    row.pop();
                }
            }
        }
    }
})

Leave a comment