Svelecte如何将选中项存入外部元素而非自身？

默认情况下，Svelecte会将选中项保留在自身组件中。如果需要实现选中项追加到数组并渲染到其他元素，同时清空组件输入框，且避免清除操作触发额外事件，可以按以下方式修改实现：

原代码存在的问题 #

• 选中项始终保留在Svelecte输入框内，无法自动清空
• 清除组件内的选中项时，会额外触发一次change事件，导致逻辑冗余

优化后的实现代码 #

<script>
  import Svelecte from 'svelecte';
  const options = [{id: 1, value: 'Hello'}, {id: 2, value: 'World'}, {id: 3, value: 'Svelte'}];
  let selection = [];
  let selectValue = null; // 绑定Svelecte的value

  function handleChange(e) {
    // 仅处理选中项的情况，忽略清空触发的null事件
    if (e.detail !== null) {
      selection = [...selection, e.detail];
      // 选中后立即清空组件的value
      selectValue = null;
    }
  }
</script>

<Svelecte  
    {options}
    bind:value={selectValue}
    on:change={handleChange}
    clearable={false} <!-- 可选：禁用内置清除按钮，避免手动清空触发额外事件 -->
/>

<div id="selection">
    {#each selection as item}
    <div>
        {item.value}
    </div>
    {/each}
</div>

关键逻辑说明 #

1. 绑定组件value：通过bind:value={selectValue}直接控制Svelecte的选中值，选中后将selectValue设为null即可清空输入框，无需依赖组件内置的清除功能。
2. 过滤无效事件：在handleChange中只处理e.detail !== null的情况，也就是仅当用户选中有效选项时才执行追加逻辑，忽略清空value时触发的额外change事件。
3. 可选禁用清除按钮：如果不需要用户手动清空组件输入框，可以设置clearable={false}彻底避免相关的事件触发。

内容的提问来源于stack exchange，提问作者w.k