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

Question

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

我有一个 Stimulus 控制器，在其中包含了对 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 中的 data-action 属性来监听“change”事件，而不是监听“select2”事件。以下代码可以正常工作。但是，如果使用 data-action-"select2:select" 来进行监听，则会失败。

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

我想使用Stimulus监听具有data-action属性的事件。这是Stimulus的预期用法。

我能否使用Stimulus监听Select2事件？

- Jesse Farmer

---

没有包装器，Stimulus只监听标准DOM事件。而Select2是jQuery的扩展，使用jQuery.Event()jQuery.trigger('select2:select');。有关如何强制jQuery将事件分派到DOM以便Stimulus可以监听它们的示例，请参见：jQuery事件委托。然后，您可以使用data-action="jquery:select2:select->controller#method"。 - Will B.

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>

- jdwyah

---

我尝试了这种方法，但问题是在更新事件中我无法读取下拉列表中选择的新值，如果我尝试使用$("#my_select_field").val()，我什么也得不到。 - Mi Ro

@MiRo 当我使用纯JavaScript使用event.currentTarget.value获取值时，它对我来说运行良好。 - Timo002

您可以使用以下代码获取多个值：$(event.currentTarget).val()。 - demir

目前对我来说 this.dispatchEvent(event) 不起作用，我必须改为 this.selectTarget.dispatchEvent(event);。 - Pedro Augusto Ramalho Duarte