如何在JavaScript/Vue中将自定义尺寸网格的表单输入存储为数组/对象

我来帮你解决这个动态网格数据存储的问题，之前做项目的时候也踩过类似的坑，咱们一步步理清楚：

你遇到的核心问题其实是没有提前根据用户选择的尺寸初始化好对应的网格数据结构，直接用v-model="grid[c][r]"的话，Vue找不到对应的数组索引（因为grid是空的或者维度不够），自然会报错，也没法正确存储数据。

下面给你一套完整的实现方案，不管用户选多少行多少列，都能稳定存储数据：

1. 核心思路 #

先根据用户输入的行数/列数，生成一个对应尺寸的二维数组作为数据容器，每个单元格提前设置默认值（比如空字符串），这样v-model绑定的时候就有明确的响应式属性可以关联，不会出现索引不存在的问题。

2. 完整Vue实现代码 #

这里用Vue 3的<script setup>语法来写，如果你用Vue 2，改成选项式写法也很容易：

<template>
  <div class="grid-container">
    <!-- 尺寸选择区 -->
    <div class="size-selector">
      <label>行数：</label>
      <input type="number" v-model.number="rows" min="1" />
      <label>列数：</label>
      <input type="number" v-model.number="cols" min="1" />
    </div>

    <!-- 动态生成的网格表格 -->
    <table border="1" v-if="rows && cols">
      <tbody>
        <!-- 先循环行，再循环列，注意索引顺序 -->
        <tr v-for="(row, rowIndex) in grid" :key="rowIndex">
          <td v-for="(cell, colIndex) in row" :key="colIndex">
            <input type="text" v-model="grid[rowIndex][colIndex]" />
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 实时预览存储的数据 -->
    <div class="data-preview">
      <h3>当前网格数据：</h3>
      <pre>{{ JSON.stringify(grid, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

// 响应式数据：行数、列数、网格数据
const rows = ref(3) // 默认3行
const cols = ref(3) // 默认3列
const grid = ref([])

// 初始化/重置网格的方法
const initGrid = () => {
  const newGrid = []
  // 循环生成每一行
  for (let r = 0; r < rows.value; r++) {
    // 每一行是一个长度为cols的数组，默认值为空字符串
    newGrid.push(new Array(cols.value).fill(''))
  }
  grid.value = newGrid
}

// 监听行数/列数变化，自动重新初始化网格
watch([rows, cols], () => {
  initGrid()
}, { immediate: true }) // 组件挂载时自动执行一次初始化
</script>

<style scoped>
.grid-container {
  padding: 20px;
}
.size-selector {
  margin-bottom: 20px;
}
.size-selector input {
  width: 60px;
  margin: 0 10px 0 5px;
}
table {
  border-collapse: collapse;
}
td {
  padding: 8px;
}
.data-preview {
  margin-top: 20px;
}
pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}
</style>

3. 关键细节解释 #

• 索引顺序别搞反：一定要先循环行（rowIndex）再循环列（colIndex），绑定v-model="grid[rowIndex][colIndex]"，如果写成grid[colIndex][rowIndex]，数据存储的位置就会错乱。
• 必须初始化数组：initGrid方法会生成一个完整的二维数组，每个单元格都有默认值，这样Vue才能追踪到每个位置的响应式变化，不会出现"Cannot set property of undefined"的报错。
• 实时响应尺寸变化：用watch监听行数和列数的变化，用户一修改尺寸就自动重新生成网格，体验更流畅。

4. 扩展优化：保留已有数据 #

如果希望用户调整尺寸时，已经输入的数据不会丢失，可以修改initGrid方法，保留原有网格中存在的单元格数据：

const initGrid = () => {
  const newGrid = []
  for (let r = 0; r < rows.value; r++) {
    const row = []
    for (let c = 0; c < cols.value; c++) {
      // 如果原有网格的对应位置有数据，就保留，否则用空字符串
      row.push(grid.value[r]?.[c] || '')
    }
    newGrid.push(row)
  }
  grid.value = newGrid
}

这样用户把3x3改成4x4时，原来的9个单元格数据会保留，新增的单元格用空字符串填充。

按照这个方案，你就能实现一个支持任意尺寸、能正确存储用户输入的简易网格啦～

内容的提问来源于stack exchange，提问作者Bandolero