将函数调用绑定到 svelte 中的 <option> 元素

Question

您好，我有一个 select 元素，其中最后一个选项应该启动休息调用以注销用户

这是我到目前为止尝试过的方法

<select ref:logout>
    <option selected value={$user.role}>{$user.role}</option>
    {#each $user.pages as page}
        <option value={page}>{page}</option>
    {/each}
    <option on:click="logout()" value='logout'>Logout</option>
</select>

<script>
    export default {
      methods: {
        logout() {
          console.log("well hello");
      }
    };
</script>

问题是永远不会调用注销方法

更新问题是我使用的是 click 事件而不是 change 并将其放在 option 元素上而不是 select

Answer 1

能否将其更改为 select 元素上的 onchange 事件？然后添加一个if语句来检测value=='logout'。类似的问题，但没有苗条： Click event on select option element in chrome

将函数调用绑定到 svelte 中的 <option> 元素

Bind a function call to a <option> element in svelte

svelte