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

您可以称其为天鹅绒主义。

随后将发生反应，并且您选择的选项应立即更新。请参阅本教程的this。

添加选项后刷新svelte select组件

1 个答案: