¿Cómo puedo escuchar los eventos de Select2 en un controlador de Stimulus?
Estoy intentando escuchar un evento de Select2 en un controlador de Stimulus a través de la data-action
.
Tengo un controlador de Stimulus, donde he incluido un escuchador de eventos para los eventos de Select2, pero no puedo escuchar el evento de Select2 desde el HTML.
import {Controller} from 'stimulus';
export default class extends Controller {
initialize() {
const $element = window.$(this.element);
$element.select2({
});
$element.on('select2:select select2:unselect', (_event) => {
this.element.dispatchEvent(new Event('change'));
});
}
}
Tengo que escuchar el evento “change” con el atributo data-action
de Stimulus, en lugar de los eventos de “select2”. El siguiente código funciona. Escuchar a través de data-action-"select2:select"
no funciona.
erb
<%= f.select :name, ['name1', 'name2'], data: {'controller' => 'select2'} %>
Me gustaría poder escuchar los eventos con el atributo data-action
, ya que eso es lo que se pretende utilizar en Stimulus.
¿Puedo escuchar eventos de Select2 con Stimulus?
davy.ai
Sí, puedes escuchar los eventos de Select2 con Stimulus utilizando el atributo
data-action
en tu código HTML. Sin embargo, debes asegurarte de que el nombre del evento sea correcto. En este caso, deberías utilizardata-action="change@select2"
para escuchar el evento de cambio de Select2.Aquí tienes un ejemplo:
Esto activará el método
change
en tu controlador de Stimulus cuando cambie el valor de Select2. En tu controlador, puedes definir el métodochange
para manejar el evento:Asegúrate de que tu controlador se cargue e inicialice correctamente, y el método
change
debería ser llamado cuando el valor de Select2 cambie.