Svelte中选中复选框移至列表顶部时的选中状态异常问题

我想要实现点击列表项时，把选中的项移到对应分组列表的顶部并显示在最上方。现在遇到的问题是：点击项后，该项确实移到了顶部，但原本在顶部的项也被自动选中了。

相关原代码 #

<script>
  let newData = [
    {
      Id: '1',
      Name: 'a',
      Group: 'GroupA'
    },
    {
      Id: '2',
      Name: 'b',
      Group: 'GroupB',
      selected: false
    },
    {
      Id: '3',
      Name: 'c',
      Group: 'GroupC'
    },
    {
      Id: '4',
      Name: 'd',
      Group: 'GroupD'
    },
    {
      Id: '5',
      Name: 'e',
      Group: 'GroupA'
    },
    {
      Id: '6',
      Name: 'f',
      Group: 'GroupA'
    },
    {
      Id: '7',
      Name: 'g',
      Group: 'GroupB'
    },
    {
      Id: '8',
      Name: 'h',
      Group: 'GroupC'
    }
  ];

  // Separate the data by Group
  let groupData = {};
  newData.forEach((item) => {
    const { Group } = item;
    if (!groupData[Group]) {
      groupData[Group] = [];
    }
    groupData[Group].push(item);
  });

  // Function to handle checkbox click
  function handleCheckboxClick(item) {
    item.selected = !item.selected;

    // Move selected item to the top of its Group list
    const Group = item.Group;
    const index = groupData[Group].findIndex((data) => data.Id === item.Id);
    groupData[Group].splice(index, 1);
    groupData[Group].unshift(item);
  }
</script>

{#each Object.keys(groupData) as Group}
  <h3>{Group}</h3>
  <div>
    {#each groupData[Group] as item}
      <label>
        <input
          type="checkbox"
          bind:checked={item.selected}
          on:click={() => handleCheckboxClick(item)}
        />
        {item.Name}
      </label>
    {/each}
  </div>
{/each}

<style>
  h3 {
    margin-top: 20px;
  }

  div {
    display: flex;
    flex-direction: column;
  }
</style>

问题原因与修复方案 #

问题出在**bind:checked和on:click的事件冲突**，加上Svelte列表循环未指定唯一标识，导致DOM元素被错误复用，触发了无关项的选中状态。

修复后的完整代码：

<script>
  let newData = [
    {
      Id: '1',
      Name: 'a',
      Group: 'GroupA'
    },
    {
      Id: '2',
      Name: 'b',
      Group: 'GroupB',
      selected: false
    },
    {
      Id: '3',
      Name: 'c',
      Group: 'GroupC'
    },
    {
      Id: '4',
      Name: 'd',
      Group: 'GroupD'
    },
    {
      Id: '5',
      Name: 'e',
      Group: 'GroupA'
    },
    {
      Id: '6',
      Name: 'f',
      Group: 'GroupA'
    },
    {
      Id: '7',
      Name: 'g',
      Group: 'GroupB'
    },
    {
      Id: '8',
      Name: 'h',
      Group: 'GroupC'
    }
  ];

  // 分组数据并初始化所有项的selected属性
  let groupData = {};
  newData.forEach((item) => {
    const { Group } = item;
    if (!groupData[Group]) {
      groupData[Group] = [];
    }
    // 统一初始化selected为false，避免默认值不一致
    if (item.selected === undefined) item.selected = false;
    groupData[Group].push(item);
  });

  // 用Svelte反应式监听选中状态变化，触发排序逻辑
  $: Object.values(groupData).forEach(group => {
    group.forEach(item => {
      if (item.selected) {
        const index = group.findIndex(data => data.Id === item.Id);
        // 只有当项不在顶部时才移动
        if (index !== 0) {
          group.splice(index, 1);
          group.unshift(item);
        }
      }
    });
  });
</script>

{#each Object.keys(groupData) as Group}
  <h3>{Group}</h3>
  <div>
    <!-- 给循环加上唯一key，让Svelte准确识别每个列表项 -->
    {#each groupData[Group] as item (item.Id)}
      <label>
        <input
          type="checkbox"
          bind:checked={item.selected}
        />
        {item.Name}
      </label>
    {/each}
  </div>
{/each}

<style>
  h3 {
    margin-top: 20px;
  }

  div {
    display: flex;
    flex-direction: column;
  }
</style>

核心修改点：

1. 移除on:click事件，改用Svelte反应式声明$:监听selected状态变化，避免重复触发状态修改
2. 给内层{#each}循环加上(item.Id)作为唯一标识，阻止Svelte错误复用DOM元素
3. 统一初始化所有项的selected属性为false，保证初始状态一致

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