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

如何解决在 Svelte 中的数组上嵌套每个循环 - 如何设置唯一的 id/key？

我想用以下形式在 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

解决方法

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