Select2 on change事件在Vuejs中不起作用 [英] Select2 on change event is not working in Vuejs

问题描述

我在vuejs中使用select2，我发现vuejs不能使用jquery select2，因为vuejs正在使用navite html。

我正在使用此代码

p>

Vue.directive（'select'，{twoWay：true，bind：function ）{$（this.el）.select2（）.on（select2：select，function（e）{this.set（$（this.el）.val（））;} .bind（this））; }，update：function（nv，ov）{$（this.el）.trigger（change）;}}）; var app = new Vue（{el：'#app'，data：{supplier_id：niklesh}}）$（'＃supplier_id'）。select2（{}）;

< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1 .1 / jquery.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js>< / script> ;< script src =https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js>< / script>< link rel =stylesheethref = https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css\">< link rel =stylesheethref =https://cdnjs.cloudflare.com/ ajax / libs / twitter-bootstrap / 4.0.0-alpha.5 / css / bootstrap.css>< div id =app> {{supplier_id}}< select id =supplier_idclass ='form-control'v-model ='supplier_id'v-select ='supplier_id'> < option value =atul> Atul< / option> < option value =niklesh> Niklesh< / option> < option value =sachin> Sachin< / option>< / select>< / div>

请分享您的回覆以解决此问题。 为了解决这个问题，使用指令，我们需要了解 v-model 是如何工作的。从文档： p>

 <输入v-model =东西> 
  

只是语法糖：

 < input v-bind：value =somethingv-on：input =something = $ event.target.value> 
  

对于select元素， v-model 将监听更改事件（而不是输入）。因此，如果指令在元素更改时调度 change 事件，那么 v-model 将按预期工作。 / p>

以下是您的代码的更新版本：

  Vue.directive（'select'，{twoWay：true，bind：function（el，binding，vnode）{$（el）.select2（）。on（select2：select， e）=> {// v模型查找//  - 名为change的事件//  - 属性路径为$ event.target.value的值el.dispatchEvent（new Event（'change'，{ target：e.target}））;}）;}，}）; var app = new Vue（{el：'#app'，data：{supplier_id：niklesh}，}）$（'＃supplier_id'） .select2（{}）;  < script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jque ry.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js>< / script>< link rel =stylesheethref =https： //cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css\">< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs /twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css\"> ;<div id =app> {{supplier_id}}< select id =supplier_idclass ='form-control'v-model ='supplier_id'v-select ='supplier_id'> < option value =atul> Atul< / option> < option value =niklesh> Niklesh< / option> < option value =sachin> Sachin< / option> < / select>< / div>  

I was working with select2 in vuejs , I found vuejs is not working with jquery select2 as vuejs is working with navite html.

I am using this code

Vue.directive('select', {
        twoWay: true,
        bind: function () {
            $(this.el).select2()
            .on("select2:select", function(e) {
                this.set($(this.el).val());
            }.bind(this));
            },
        update: function(nv, ov) {
            $(this.el).trigger("change");
        }
    });
    var app = new Vue({
      el: '#app',
      data: {
        supplier_id: "niklesh"
      }
    })
    $('#supplier_id').select2({});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
  {{ supplier_id }}

<select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
    <option value="atul">Atul</option>
    <option value="niklesh">Niklesh</option>
    <option value="sachin">Sachin</option>
</select>

</div>

Please share your reply to handle this problem.

解决方案

To get this to work with a directive, we need to understand how v-model works. From the docs:

<input v-model="something">

is just syntactic sugar for:

<input v-bind:value="something" v-on:input="something = $event.target.value">

In the case of a select element, v-model will listen for the change event (not input). So, if the directive dispatches a change event when the element changes, then v-model will work as expected.

Here is an updated version of your code:

Vue.directive('select', {
  twoWay: true,
  bind: function (el, binding, vnode) {
    $(el).select2().on("select2:select", (e) => {
      // v-model looks for
      //  - an event named "change"
      //  - a value with property path "$event.target.value"
      el.dispatchEvent(new Event('change', { target: e.target }));
    });
  },
});
var app = new Vue({
  el: '#app',
  data: {
    supplier_id: "niklesh"
  },
})
$('#supplier_id').select2({});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
  {{ supplier_id }}

  <select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
    <option value="atul">Atul</option>
    <option value="niklesh">Niklesh</option>
    <option value="sachin">Sachin</option>
  </select>

</div>

这篇关于Select2 on change事件在Vuejs中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！