Svelte MUI Select组件on:change事件绑定失效问题求助

问题原因 #

SMUI（Svelte Material UI）的Select组件并未直接转发原生change事件，而是通过自定义的SMUI:change事件来通知选择状态变化。你当前绑定的on:change监听的是原生DOM事件，但组件内部不会触发该原生事件，因此处理函数无法执行。

修复方案 #

将事件绑定从on:change替换为on:SMUI:change即可触发事件处理函数：

修改后的完整代码 #

<script type="ts">
    import Select, { Option } from '@smui/select';

    const onChange = () => {
        console.log('on change!');
    };

    let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];

    let value = 'Orange';
</script>

<div>
    <Select bind:value label="Select Menu" on:SMUI:change={onChange}>
      {#each fruits as fruit}
        <Option value={fruit}>{fruit}</Option>
      {/each}
    </Select>

    <pre class="status">Selected: {value}</pre>
</div>

额外补充 #

如果需要获取选中的具体值，可以在事件处理函数中读取事件对象的detail属性，其中包含选中项的相关信息：

const onChange = (event: CustomEvent) => {
    console.log('选中的值:', event.detail.value);
};

内容的提问来源于stack exchange，提问作者dcernahoschi