如何在嵌套v-for循环中动态设置v-model？

首先明确：<td>不是表单控件，v-model不能直接绑定在td上，这是核心问题。另外你的代码还有几处需要调整的地方，一步步来修正：

1. 重构数据结构 #

先在Vue实例的data里定义一个二维数组专门存储网格字母，替代原有的绑定方式：

data() {
  return {
    rows: 5, // 可根据需求修改行数
    cols: 5, // 可根据需求修改列数
    grid: [] // 存储网格字母的二维数组
  }
},

2. 初始化网格数据 #

不要直接在模板里调用randomLetter()（会导致每次渲染重复执行），改用created钩子或独立方法生成初始网格：

created() {
  this.initGrid();
},
methods: {
  initGrid() {
    this.grid = Array(this.rows).fill().map(() => {
      return Array(this.cols).fill().map(() => this.randomLetter());
    });
  },
  randomLetter() {
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    return letters[Math.floor(Math.random() * letters.length)];
  }
}

3. 渲染网格并实现双向绑定 #

如果需要让网格内容可编辑（比如标记选中单词），可以通过以下两种方式实现：

方法一：嵌套input控件（原生支持v-model，推荐） #

在td里放一个input，绑定到grid对应位置，再通过样式让它看起来和td融为一体：

<table>
  <tr v-for="(row, rowIndex) in grid" :key="rowIndex">
    <td v-for="(letter, colIndex) in row" :key="colIndex">
      <input type="text" v-model="grid[rowIndex][colIndex]" maxlength="1" />
    </td>
  </tr>
</table>

对应的样式：

td input {
  border: none;
  width: 2em;
  height: 2em;
  text-align: center;
  background: transparent;
  text-transform: uppercase;
}

方法二：用contenteditable元素（需自定义指令） #

如果不想用input，想直接让td可编辑，需要自定义v-model指令来支持contenteditable元素：

directives: {
  model: {
    inserted(el, binding) {
      el.textContent = binding.value;
      el.addEventListener('input', () => {
        const value = el.textContent.trim().toUpperCase();
        binding.instance[binding.expression] = value;
      });
    },
    update(el, binding) {
      if (el.textContent !== binding.value) {
        el.textContent = binding.value;
      }
    }
  }
}

模板中使用方式：

<table>
  <tr v-for="(row, rowIndex) in grid" :key="rowIndex">
    <td v-for="(letter, colIndex) in row" :key="colIndex">
      <span v-model="grid[rowIndex][colIndex]" contenteditable="true"></span>
    </td>
  </tr>
</table>

额外注意事项 #

• v-for必须添加:key，用索引即可，避免渲染时出现混乱
• 如果只是展示网格不需要编辑，直接渲染grid[rowIndex][colIndex]即可，无需v-model
• randomLetter()建议返回大写字母，符合单词搜索游戏的常规设计

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