Svelte中切换questionType后filterType绑定值未更新的解决办法

在你的代码里，切换questionType时第二个select的选项会更新，但filterType没跟着变，是因为原来的filterType值不在新的选项列表里，Svelte的绑定没法自动匹配到有效选项，导致变量和DOM不同步。

直接给你改好的代码：

<script>
    let questionType: string = 'text'; // 给初始值避免未定义状态
    let filterType: string = 'contains';

    // 监听questionType变化，自动重置filterType到对应类型的默认值
    $: if (questionType) {
        filterType = questionType === 'text' ? 'contains' : 'lessThan';
    }
</script>

<select bind:value={questionType}>
    <option value="text">Text</option>
    <option value="numeric">Numeric</option>
</select>

<select bind:value={filterType}>
    {#if questionType === 'text'}
        <option value="contains">Contains</option>
        <option value="exact">Exact</option>
        <option value="regex">Regex</option>
    {:else if questionType === 'numeric'}
        <option value="lessThan">Less than</option>
        <option value="equalTo">Equal to</option>
        <option value="greaterThan">Greater than</option>
    {/if}
</select>

关键说明： #

• 用Svelte的$:反应式语句，只要questionType变化，就自动把filterType设置为对应类型的有效默认值（你也可以把numeric的默认值改成equalTo，按需调整）
• 给两个变量加上初始值，避免初始状态下变量为undefined引发的异常
• 不要手动设置selected属性，bind:value已经完全接管了选中状态，手动加selected会和绑定逻辑冲突，根本起作用

这样切换questionType时，filterType会立刻同步成对应类型的有效筛选值，后续逻辑就不会因为拿到无效的filterType而崩溃了。

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