AlpineJS：在 <option> 标签内使用哪个 x-on 指令？ @click 似乎不适用于 <option> 标签

Question

我想在 select 标记中选择特定选项时触发操作。 @click 适用于所有其他标签，但似乎不适用于 option。是否有像 @selected 这样的指令，我可以在选择 option 时触发操作？

<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.3.4/dist/cdn.min.js"></script>
  </head>

  <body>

    <div x-data="{}">

        <!-- this does NOT work -->
        <select>
            <option @click="alert('option 1');">option 1</option>
            <option @click="alert('option 2');">option 2</option>
            <option @click="alert('option 3');">option 3</option>
        </select>

        <!-- this works -->
        <button @click="alert('button clicked');">Click</button>

    </div>

  </body>
</html>

Answer 1

您不能将事件附加到 <option> 标签，但您可以将 change 事件附加到 <select> 标签并使用所选选项的值。

<select x-on:change="alert($el.value)">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

AlpineJS：在 <option> 标签内使用哪个 x-on 指令？ @click 似乎不适用于 <option> 标签

AlpineJS: which x-on directive to use inside <option> tag? @click does not seem to work on <option> tag

javascript

alpine.js