在Svelte中嵌套数组上的每个循环-如何设置唯一的id/密钥

Question

我想用Svelte中的以下形式呈现一个数组，每个数组有两个嵌套的循环。

const arr = [
[ a, b, c ],
[ d, e, f ],
[ g, h, i ]
]
{#each arr as row, rowIndex}
<div class="row">
{#each row as cell, cellIndex ($arr[rowIndex][cellIndex]) }
<div class="cell"> {cell} </div>
{/each}
</div>
{/each}

演示REPL->https://svelte.dev/repl/4dbec2d8c2ac4b6493e78418bd861f4c?version=3.38.2

想要的效果=>点击的元素首先消失，然后元素向右移动到上

当设置{#each arr as row, rowIndex (rowIndex)}+{#each row as cell, cellIndex (cellIndex)}时，其行为不是那样的(->https://svelte.dev/repl/e7369788e2614bbbbf9c42cde6a4130a?version=3.38.2)

如果每个单元格的内容都是唯一的，那么像这样设置单元格上的id效果很好->($arr[rowIndex][cellIndex])

但是，如果两个单元格包含相同的内容，那就不起作用。(激活REPL存储中arr中的最后一个元素->"每个键控中不能有重复的键"(

所以我想知道在这种情况下，是否有其他方法可以设置唯一的id？

我想出了一些将rowIndex与cellIndex相结合的方法，例如"00，01，02，10，11，12，20，…"但这些都不起作用：

rowIndex.toString().concat(cellIndex.toString())
""+rowIndex+cellIndex
+(""+rowIndex+cellIndex)
$arr[rowIndex][cellIndex]+rowIndex+cellIndex

Answer 1

为什么不使用cellIndex作为内部#each中的键而不是$arr[rowIndex][cellIndex]？这是因为密钥只需要在一个特定的#each内是唯一的，而每个嵌套的#each最终都是唯一的。