AlpineJS中option标签用什么x-on指令？@click绑定不生效如何处理

问题原因 #

原生<option>标签本身不支持click事件，浏览器规范中点击下拉选项的交互会直接触发父级<select>的change事件，因此绑定在option上的@click不会生效，也没有专门绑定在option上的@selected类指令可直接使用。

实现方案 #

你可以通过给<select>绑定@change事件，判断当前选中值的方式触发对应操作，以下是可直接运行的修正代码：

<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>
  </head>
  <body>
    <div x-data="{}">
        <select @change="
          const val = $event.target.value;
          val === '1' ? alert('option 1') : 
          val === '2' ? alert('option 2') : 
          alert('option 3');
        ">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
        </select>
        <button @click="alert('button clicked');">Click</button>
    </div>
  </body>
</html>

如果业务逻辑比较复杂，也可以用x-model绑定选中值，在状态变化时执行对应逻辑：

<div x-data="{selected: ''}">
  <select x-model="selected">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
  </select>
  <!-- 选中值变化时自动触发对应操作 -->
  <div x-effect="
    selected === '1' && alert('option 1选中');
    selected === '2' && alert('option 2选中');
    selected === '3' && alert('option 3选中');
  "></div>
</div>

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