Estoy tratando de escuchar un evento Select2 en un controlador Stimulus a través de la data-action .
Tengo un controlador de estímulo, donde he incluido un detector de eventos para eventos Select2, pero no puedo escuchar el evento Select2 del 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 "cambiar" con el atributo data-action Estímulo, en lugar de los eventos "select2". El siguiente código funciona. Escuchar a través data-action-"select2:select" no funciona.
<%= f.select :name, ['name1', 'name2'], data: {'controller' => 'select2'} %> Me gustaría escuchar eventos con el atributo data-action , ya que Stimulus está destinado a ser utilizado.
¿Puedo escuchar eventos de Select2 con Stimulus?
Me gusta el enfoque de https://psmy.medium.com/rails-6-stimulus-and-select2-de4a4d2b59e4
Haga una incisión en el método connect() del controlador que es responsable de capturar el evento select2 y envíelo de regreso como un evento de cambio estándar para que 'data-action': "change->controller#update" funcione como se esperaba .
import {Controller} from '@hotwired/stimulus'; export default class extends Controller { static targets = ["select"]; connect() { $(this.selectTarget).on('select2:select', function () { let event = new Event('change', { bubbles: true }) // fire a native event this.dispatchEvent(event); }); } update(event) { console.log("UPDATE"); } } <div data-controller="selector" > <select 'data-criteria-form-target': 'select', 'data-action': "change->controller#update"> </div>