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

【问题标题】：Bind a function call to a <option> element in svelte将函数调用绑定到 svelte 中的 <option> 元素
【发布时间】：2018-12-18 13:46:43
【问题描述】：

嗨，我有一个选择元素，其中最后一个选项应该启动一个休息呼叫以注销用户

这是我迄今为止尝试过的

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

【问题讨论】：

标签： svelte

【解决方案1】：

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

【讨论】：

我应该提到我正在寻找 svelte 事件而不是 dom 事件，因为我目前没有在这个项目中包含 jQuery。 Guss ill 只需要使用按钮创建一个虚假的下拉菜单，因为 select 元素从未用于此目的。
怎么样然后有一个方法 doStuff(v){ if(v=='logout'){console.log('do it');} }