Блог

Главная - Вопросы по программированию - AlpineJS: какую директиву x-on использовать внутри тега ? @click, похоже, не работает с тегом

AlpineJS: какую директиву x-on использовать внутри тега ? @click, похоже, не работает с тегом

#javascript #alpine.js

Вопрос:

Я хотел бы инициировать действие, когда в теге выбран определенный параметр 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>

Ответ №1:

Вы не можете прикреплять события к <option> тегам, но вы можете прикрепить change событие к <select> тегу и использовать значение выбранного параметра.

 <select x-on:change="alert($el.value)">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
Метки: , ,