Svelte contenteditable 未正确更新答案

【问题标题】：Svelte contenteditable is not updated properlySvelte contenteditable 未正确更新
【发布时间】：2021-06-10 11:20:06
【问题描述】：

我使用 Svelte 创建了电子表格，但它似乎无法正确更新单元格。

我在每个单元格中附加了“2”后缀，当我编辑内容时（比如将 jim 中的第一个字母固定为大写），它应该以两个“2”作为“Jim22”结束。但它最终只有一个“2”作为“Jim2”。

我还有 JSON 输出来检查 rows 的值，它发生了变化，因此组件已正确更新，但可编辑单元格没有更新为“Jim22”，它仍然是“Jim2”。

为什么，以及如何解决这个问题？

playground

代码

<script>
  let rows = [
    ["jim"],
    ["Kate"]
  ]

  function update(i, j, event) {
        rows[i][j] = event.target.innerText
  }
</script>

<table>
  {#each rows as row, i}
    <tr>
      {#each row as cell, j}
        <td contenteditable="true" on:blur="{(event) => update(i, j, event)}">{cell}2</td>
      {/each}
    </tr>
  {/each}
</table>

<pre>{JSON.stringify(rows, null, 2)}</pre>

【问题讨论】：

我不知道为什么，但我发现<td>{@html cell}2</td> 解决了这个问题。寻找解释。
我不知道为什么它也不起作用，但 <td>{cell + "2"}</td> 也起作用。此外，有趣的是，当您最初加载 Playground 并检查 <td> 时，它会在新的一行显示 "Jim" 和 "2"。

标签： svelte

【解决方案1】：

只需为每个语句添加键即可。根据document

<script>
  let rows = [
    ["Jim",  "Raynor"],
    ["Kate", "Bishop"]
  ]

  function update(i, j, event) {
        rows[i][j] = event.target.innerText
  }
</script>

<table>
  {#each rows as row, i (row)}
    <tr>
      {#each row as cell, j (cell)}
        <td contenteditable="true" on:blur="{(event) => update(i, j, event)}">{cell}2</td>
      {/each}
    </tr>
  {/each}
</table>

<pre>{JSON.stringify(rows, null, 2)}</pre>

【讨论】：

【解决方案2】：

我不认为龙武的回答是问题的根本原因，因为它无法解释为什么问题的 cmets 中提到的修改有效。添加密钥是一种解决方法。

经过一番调试和搜索，我发现了这个问题：Repeat words in plain text aren't reactive。当尝试将"Jim" 更新为"Jim2" 时，svelte 使用set_data function，与text.wholeText === data 进行比较。而text.data是"Jim"，text.wholeText和data都是"Jim2"，所以跳过更新。

About wholeText:

Text.wholeText 只读属性返回与该节点逻辑相邻的所有Text 节点的全文。

所以，通过检查td 的childNodes 属性：

<td>{cell}2</td> 有两个 Text 节点："Jim" 和 "2"，而 wholeText 是 "Jim2"
<td>{cell + "2"}</td> 有一个Text 节点，没问题
<td>{@html cell}2</td> 没有使用set_data 函数，很好

同样如问题中所述，将 svelte 降级到 v3.23.2 可以使 <td>{cell}2</td> 按预期工作。

【讨论】：