小编kho*_*ayr的帖子

我正在使用 vue.js 和 React，目前我正在尝试改编一本关于 React 的书中的一个简单的可编辑 HTML 表格示例，以便学习 Vue。

以下是代码中发生的情况：

\n
1. 用户点击 td 元素
\n
2. td 元素的坐标存储在 rowSel、colSel 变量中
\n
3. 坐标变化导致Vue重新渲染视图
\n
4. 用户单击的 td 单元格添加了“contenteditable=true”属性，并添加了 focusout 事件监听器
\n
5. 然后，用户可以更改 td 单元格中的数据，然后单击单元格以停止编辑（触发焦点）
\n
6. 当用户单击单元格时， rowSel 和 colSel 变量将被重置，这会导致重新渲染
\n
7. vue 重新渲染视图，并且由于坐标被重置，Vue 应该从相关 td 元素中删除 contenteditable 和 focusout
\n
8. 然后，包含表格数据的数据数组将使用用户在单元格可编辑时输入的文本进行更新（尚未实现）
\n

我遇到的问题是第 7 步。我可以单击表格中的多个单元格，所有单元格中仍将设置 contenteditable="true"。如果您查看 Chrome 开发工具，您会发现 contenteditable 标签粘贴到所有被单击的单元格上。

我相信问题的发生是因为我有嵌套的 for 循环，但我不确定如何正确地向它们添加键以使其正常工作。我尝试添加键，但我认为我做得不正确。

JSFiddle:\n https://jsfiddle.net/o69yaq7L/

这是代码：

"use strict";\r\n\r\nvar headers = [\r\n    "Book", "Author", "Language", …