我正在尝试<select/>
使用从基于 Promise 的函数获得的数据初始化输入。在输入初始化选项后(每个选项从解析的数据中获取值和标签),一个属性被绑定到<select/>
.
但是每次我更改选项(使用属性绑定)时,{#await}
块内的所有内容都会重新加载(似乎它解决了相同的 Promise 并重置了选项)。
当我删除绑定时,这不会发生。
我尝试了以下方法:
尝试将属性绑定到选择。
`<select bind:value={selected_device}>...`
尝试绑定从列表中获取所选选项的事件。
`<select on:change={set_selected_device}>...`
尝试制作另一个按钮以获取所选选项。
<select>...</select> <button on:click={set_selected_device}>Set</button>`
这是当前状态的片段:
等待块:
<div class="device-select container">
{#await VoiceStreamingService.get_microhpones()}
{:then devices}
<select id="device-options">
<option selected disabled>Select an Option...</option>
{#each devices as device (device.deviceId)}
<option value={device.deviceId}>{device.label}</option>
{/each}
</select>
{:catch}
{/await}
<button on:click={set_selected_device}>Connect To</button>
</div>
set_selected_device 函数:
function set_selected_device() {
let d = document.getElementById("device-options");
selected_device = d.options[d.selectedIndex].value;
console.log(selected_device);
}
我错过了什么重要的东西,还是一个错误?