javascript - 添加选项后刷新 svelte select 组件

Question

我试图在添加选项后使选择组件自行更新，但我不能。这是我的代码:

<script>
  const options = ['first_option']
  const addEventSignal = () => {
    const option = prompt('Please enter new option', '')
    if (option) {
      options.push(option)
    }
  }
  const doSomething = event => {
    console.log(event)
  }
</script>

<style></style>

<div>
  <select bind:value={options} on:change={doSomething}>
    {#if options}
      {#each options as option}
        <option value={option}>{option}</option>
      {/each}
    {/if}
  </select>
  <button type="button" on:click={addEventSignal}>Add Signal</button>
</div>

如果我重新加载组件，它会显示新选项，但我希望输入对话框消失后，新选项就会出现在选择列表中。

Answer 1

Svelte 未检测到您的 options 对象的突变:

options.push(option)

它仅跟踪分配，使用 =。让编译器意识到修改的一个非常常见的解决方案是这种情况是自分配:

// you'd also have to make it a `let`, of course
options.push(option)

// this, Svelte will see!
options = options

你可以称之为斯维尔特主义。

react 将会随之发生，您选择的选项应该立即更新。详情请参阅this section本教程的内容。