时间戳

首页 > 解决方案 > 添加选项后刷新细长选择组件

javascript - 添加选项后刷新细长选择组件

问题描述

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

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

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

标签： javascripthtmlsvelte

解决方案

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

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

反应将随之而来，您选择的选项应立即更新。请参阅本教程的此部分中的详细信息。

推荐阅读