Question

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

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

    <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 =＆＃34; grid [c] [r]＆时，希望我的意图是明确的。＃34; 。我需要这个能够使用任何网格化，这样我就会在应用程序中尝试更改它时出错。

任何提示或建议？ TY

Answer 1

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

＆＃13;

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

＆＃13;

input { width: 50px }

＆＃13;

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

＆＃13;

另请注意，添加v-if="grid[c] !== undefined && grid[c][r] !== undefined"这是因为Vue不会尝试访问grid[c][r]而grid[c]未定义，这会引发错误并将其全部停止。

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

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

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

2 个答案: