如何在刺激控制器中监听 Select2 事件？

Question

我正在尝试通过 .Stimulus 控制器监听 Select2 事件data-action。

我有一个刺激控制器，其中包含了 Select2 事件的事件侦听器，但我无法侦听 HTML 中的 Select2 事件。

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'));
    });
  }
}

我必须使用 Stimulus 属性监听“change”事件data-action，而不是“select2”事件。以下代码有效。通过收听data-action-"select2:select"不起作用。

<%= f.select :name, ['name1', 'name2'], data: {'controller' => 'select2'} %>

我想监听具有该data-action属性的事件，因为旨在使用刺激。

我可以使用 Stimulus 监听 Select2 事件吗？

Answer 1

我喜欢https://psmy.medium.com/rails-6-stimulus-and-select2-de4a4d2b59e4的方法

在控制器的 connect() 方法中切入一个切口，该方法负责捕获 select2 事件并将其作为标准更改事件发送回，以便按'data-action': "change->controller#update"预期工作。

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>