Me gustaría activar una acción cuando se selecciona una opción específica en la etiqueta de select . @click funciona en todas las demás etiquetas, pero cuando no parece funcionar en la option . ¿Hay una directiva como @selected donde puedo activar una acción cuando se selecciona una 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>No puede adjuntar eventos a las etiquetas <option> , pero puede adjuntar un evento de change a la etiqueta <select> y usar el valor de la opción seleccionada.
<select x-on:change="alert($el.value)"> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select>