如何将输入从网格存储到向量/对象(javascript，vue)

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="grid[c][r]">时，我的意图是明确的。我需要它才能使用任何网格大小，这样如果我尝试在应用程序中更改它，我就会出错。

有什么提示或建议吗？

Answer 1

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

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]，这将引发错误并停止所有内容。

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>

脚本

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