如何将输入从网格存储到向量/对象（javascript，vue）答案

【问题标题】：How to store inputs form grid into vector/object (javascript, vue)如何将输入从网格存储到向量/对象（javascript，vue）
【发布时间】：2018-03-08 16:13:53
【问题描述】：

我正在使用 javascript/vue 做一个项目，试图有一个简单的网格，用户可以在其中选择尺寸，然后我可以将他的数据存储在相应的对象中。

Looking something like this

我的问题是创建表后存储数据。我正在尝试这种方法

    <template>
    <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">
              {{r}}{{c}}: <input type="number" v-model.number="grid[c][r]" /> &nbsp
            </td>
          </tr>
    </table>
    </template>

<script>
export default {
  data() {
    return {
      grid: [
        { "0": null },
        { "0": null }
        ],
      nRows: 5,
      nColumns: 3
    }
  }
</script>

我不确定如何制作网格矩阵来存储它，但希望当我尝试执行 v-model="grid[c][r]" 时我的意图很明确。我需要它才能使用任何网格大小，这样如果我尝试在应用程序中更改它就会出错。

有什么提示或建议吗？太棒了

【问题讨论】：

标签： javascript arrays matrix vue.js

【解决方案1】：

您可以在行数和列数中添加Watcher，并根据需要添加：

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>

还要注意添加的v-if="grid[c] !== undefined && grid[c][r] !== undefined"，这是为了让 Vue 不要尝试访问 grid[c][r]，而 grid[c] 未定义，这会引发错误并停止所有操作。

【讨论】：

【解决方案2】：

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>

脚本

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();
                }
            }
        }
    }
})

【讨论】：