svelte - 反应性地重置选择小部件

Question

我有一个带有两个选择小部件的页面，简单的用例是，当用户更改第一个小部件上的选择时，应该清除第二个选择。

它实际上是这样工作的，从两个选择中选择的选项在哪里，在哪里selectedValue1，selectedValue2但感觉很hackish

$: selectedValue2 = (selectedValue1) ? '' : '';

对于这样的用例，是否有更简洁、更优雅的实现？

标签： svelte

Answer 1

使用事件监听器：

<select
  bind:value={selectedValue1}
  on:change="{() => selectedValue2 = null}"
>...</select>

<select
  bind:value={selectedValue2}
>...</select>

演示在这里。请注意，我正在使用，svelte-ignore a11y-no-onchange否则它会抱怨使用change事件，我认为在这种情况下可能没问题。