Svelte 3 复选框执行搜索过滤后无法正常勾选问题求助

问题根因 #

1. Svelte3 动态属性绑定的响应式跟踪缺陷 #

使用bind:group={selectedVars[schemaVar.name].lts}这种包含动态键的绑定写法时，Svelte3的响应式追踪逻辑无法持久化这个动态生成的引用关系。当搜索操作触发DOM重渲染（不符合搜索条件的复选框被销毁，清空搜索后重新生成复选框节点）后，新渲染的复选框没有正确和selectedVars[schemaVar.name].lts建立双向绑定，所以点击操作无法同步到数组，也不会触发勾选状态更新。
硬编码键名时，Svelte可以直接识别固定的引用路径，重渲染后绑定关系不会丢失，因此功能正常。

2. 无key的each列表渲染逻辑放大问题 #

内层遍历availableLTs的{#each}块没有指定唯一key值，Svelte默认会采用“就地更新”策略复用DOM节点，进一步打乱了绑定关系的对应性，提升了绑定失效的概率。

修复方案 #

可任选以下一种方案解决问题：

• 方案1：给each块添加唯一key
  明确标识每个列表项的唯一身份，避免Svelte错误复用DOM节点：

  {#each availableLTs as ele (ele)}
    <!-- 原有if判断和复选框逻辑保持不变 -->
  {/each}
  

• 方案2：缓存动态绑定目标
  在外层each块内部提前把动态生成的绑定目标缓存为固定变量，避免每次渲染都重新解析动态键：

  {#each schemaVars as schemaVar}
    {@const currentLts = selectedVars[schemaVar.name].lts}
    <!-- 后续复选框绑定改为 bind:group={currentLts} -->
  {/each}
  

• 方案3：升级框架版本
  该动态绑定的跟踪缺陷已经在Svelte4及以上版本被修复，升级到更高版本的Svelte即可直接解决问题。

内容的提问来源于stack exchange，提问作者Chris