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

Question

我想在 Svelte 中使用以下形式呈现一个数组，其中包含两个嵌套的 each 循环。

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 最终都是。