Question

我试图创建一个vuejs2指令，该指令将选择已经渲染的选择并将其包装到select2中。这部分正在运行，但没有选择所选的值：

Vue.directive('select', {
    inserted: function (el) {

        $(el).select2({
            matcher: modelMatcher,
            minimumResultsForSearch: 6,
            dropdownAutoWidth: true,
            width: 'auto'
        });

    }
});

任何想法如何做到这一点？这可能适用于vuejs 1：

https://gist.github.com/themsaid/c0548e19f247b832ac4f

但不再工作了。

Answer 1

问题是select2，更改后会抛出jQuery.Event Object， Vue只会对常规JavaScript事件作出反应。

因此解决方法是，在初始化select2之后，听取它发出的change jQuery.Event并发出change CustomEvent，这样Vue就会选择它。

当Vue选择change CustomEvent时，它会更新v-model。

下面的演示。

＆＃13;

Vue.directive('select', {
  inserted: function(el) {
    var self = this;
    $(el).select2({
      //matcher: modelMatcher,
      //minimumResultsForSearch: 6,
      //dropdownAutoWidth: true,
      width: 'auto'
    }).on('change', function(e) {
      if (e.detail === "vue-directive") {
        return; // prevent stack overflow (i.e. listening to the event we threw ourselves)
      }
      // throw regular change (non jQuery) event, so vue reacts
      el.dispatchEvent(new CustomEvent("change", {
        detail: "vue-directive"
      }));
      return false;
    })
  }
});
new Vue({
  el: '#app',
  data: {
    states: ["AL", "AK", "AZ"],
    selectedState: "AK",
  }
})

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <select v-model="selectedState" v-select>
    <option v-for="state in states" :value="state">{{ state }}</option>
  </select>
  <p>Selected State: {{ selectedState }}</p>
</div>

＆＃13;

请注意，这只是一种方式，利用Vue's Custom Directives Hook Functions可以提供各种各样的可能性。另请注意，上面显示的示例比您提供的要点简单得多，因为它不处理unbind挂钩。实施应该是直截了当的，OTOH。

使用带有vuejs指令的select2，来自html的数据

1 个答案: