添加选项后刷新细长选择组件答案

【问题标题】：refresh svelte select component after adding an option添加选项后刷新细长选择组件
【发布时间】：2019-11-29 19:20:54
【问题描述】：

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

<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>

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

【问题讨论】：

标签： javascript html svelte

【解决方案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

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

反应会随之而来，您选择的选项应立即更新。详见教程this section。

【讨论】：