更改事件上的Select2在Vuejs中不起作用

3 回答

• 0

  <select v-model="selected">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
  </select>
  
  
  const self = this;
  $("select").change(function () {
          const val = $(this).find("option:selected").val();
          self.selected = val;
   });
  

  回复于 2024-04-25T03:00:03+08:00
• 5

  要使其与指令一起使用，我们需要了解 v-model 的工作原理 . 来自docs：

  <input v-model =“something”>

  只是语法糖：<input v-bind：value =“something”v-on：input =“something = $ event.target.value”>

  对于select元素， v-model 将侦听 change 事件（不是 input ） . 因此，如果指令在元素更改时调度 change 事件，则 v-model 将按预期工作 .

  这是您的代码的更新版本：

  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>
  

  回复于 2024-04-25T03:00:03+08:00
• 3

  通过将select2值分配给vuejs数据，我能够解决这个问题 . 我这里没有使用自定义指令 .

  var app = new Vue({
    el: '#app',
    data: {
      supplier_id: "niklesh"
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  });
  
  $('#supplier_id').on("change",function(){
      app.supplier_id = $(this).val();
      console.log('Name : '+$(this).val());
  });
  
  $('#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">
    Name : {{ supplier_id | capitalize }}
  <select id="supplier_id" class='form-control' v-model='supplier_id'>
      <option value="atul">Atul</option>
      <option value="niklesh">Niklesh</option>
      <option value="sachin">Sachin</option>
  </select>
  
  </div>
  

  如果这不是好方法或您建议的任何更好的解决方案，请评论 .

  回复于 2024-04-25T03:00:03+08:00