Javascript vue.js不更新嵌套v-for循环中的属性

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

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

用户点击td元素

td元素的坐标存储在rowSel、colSel变量中

坐标更改会导致Vue重新渲染视图

用户单击的td单元格添加了“contenteditable=true”属性，并添加了focusout事件侦听器

然后，用户可以更改td单元格中的数据，并单击关闭单元格以停止编辑（focusout触发）

当用户单击单元格时，rowSel和colSel变量将重置，从而导致重新渲染

vue重新渲染视图，并且由于坐标已重置，vue应从相关td元素中删除contenteditable和focusout

然后，包含表格数据的数据数组将使用用户在单元格可编辑（尚未实现）时输入的文本进行更新

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

我相信问题的出现是因为我有嵌套的for循环，但我不知道如何正确地向它们添加键以使其工作。我曾尝试添加关键点，但我认为我做得不对

JSFiddle：

代码如下：

“严格使用”；
变量头=[
“书籍”、“作者”、“语言”、“出版”、“销售”
];
风险值数据=[
[“指环王”、“J.R.R.托尔金”、“英语”、“1954-1955”、“1.5亿”]，
[《小王子》（小王子）、《安托万·德·圣埃克苏佩里》、《法语》、《1943年》、《1.4亿》]，
[《哈利波特与魔法石》、《J.K.罗琳》、《英语》、《1997》、《1.07亿》]，
[“然后就没有了”，“阿加莎·克里斯蒂”，“英语”，“1939”，“一亿”]，
[《红楼梦》、《曹雪芹》、《中国人》、《1754-1791》、《一亿》]，
[“霍比特人”、“J.R.R.托尔金”、“英语”、“1937”、“一亿”]，
[“她：冒险史”、“H.Rider Haggard”、“英语”、“1887”、“1亿”]，
];
var Excel=new Vue({
el:“#应用程序”，
数据：{
colData：数据，
标题：标题，
科塞尔：-1，
罗塞尔：-1
},
方法：{
数据点击：函数（ev）{
this.colSel=ev.target.cellIndex；
this.rowSel=ev.target.parentElement.rowIndex-1；
Vue.nextTick（函数（）{
ev.target.focus（）；
});
},
lostFocus:函数（ev）{
console.log（ev.target.textContent）；
//var changedRow=this.colData.slice（this.rowSel，this.rowSel+1）；
this.colSel=-1；
this.rowSel=-1；
console.log（this.colSel+“”+this.rowSel）；
}
}
});

VUEJS测试
{{item}}
{{item}}
{{item}}
您必须为两个if/else语句指定不同的键，如下所示：

<tr v-for="(row,rowInd) in colData"  :key="row.id">
    <template v-for="(item,colInd) in row"  >
        <template v-if="rowInd == rowSel && colInd == colSel">
            <td contenteditable="true" v-on:focusout="lostFocus" :key="item.id"  key="key1">{{item}}</td>
        </template>
        <template v-else>
            <td v-on:dblclick="dataClick" key="key2">{{item}}</td>
        </template>
    </template>
</tr>


{{item}}
{{item}}

见更新

之所以会出现这种情况，是因为Vue尝试尽可能高效地渲染元素，通常会重复使用它们，而不是从头开始渲染。因为在您的例子中if和else templace都使用相同的元素，所以不会被替换，只是它的click事件。但这并不总是可取的，所以Vue为您提供了一种方式，这可以通过添加具有唯一值的
key
属性来完成。
请更新代码段以显示调试时必须显示的值，因为当前它只是一个表，很难说发生了什么，因为vue devtools没有在JSFIDLE上工作。您能告诉我“key”和“：key”（前面有冒号的key）之间的区别吗是我在Vue网站上看到使用“：key”添加密钥的引用，例如：。
：key
相当于
v-bind:key
，用于将其绑定到动态值，即。E任何vue实例都是可变的。