vue2js - 如何在指令中使用选定的 select 值传播 selected 索引

Question

请看下面的代码。第一个 select 框是用 chosen js 创建的。更改后，它应将其更改后的值传播到其绑定的模型 (cityid)。第二个普通 select 框工作正常，它的值被传播。

Vue.directive('chosen', {
  bind: function (el, binding, vnode, oldVnode) {

    Vue.nextTick(function() {

      $(el).chosen({
        width:'100%'
      }).change(function(){

        alert($(el).val());
        vnode.context.$emit('input', $(el).val());
        
      });
    });

  },
  update: function(el, binding, vnode, oldVnode) {

  }
});


new Vue({
  el : '#app',
  data:{
    cityid : 3,
    cities : [
      {id:1, value:'London'},
      {id:2, value:'Newyork'},
      {id:3, value:'Delhi'}
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css" >  
  
<div id="app">
    selected city id # {{ cityid }}
    <hr>
    <select v-chosen v-model="cityid">
      <option v-for="option in cities" :value="option.id" >{{option.value}}</option>
    </select>
    <hr>
    <select  v-model="cityid">
      <option v-for="option in cities" :value="option.id" >{{option.value}}</option>
    </select>
    
  </div>

Answer 1

当您在指令中发出时，您是从根节点（context）发出事件。您需要从节点本身发出事件。您无权访问 $emit 事件，但可以检查已附加到节点的处理程序。在这种情况下，v-model 正在应用 change 处理程序。因此，如果您这样编写指令，您的代码应该可以工作。

Vue.directive('chosen', {
  bind: function (el, binding, vnode, oldVnode) {
    Vue.nextTick(function() {
      $(el).chosen({
        width:'100%'
      }).change(function(e){
        vnode.data.on.change(e, $(el).val())
      });
    });
  }
});

这是一个example.

vue2js - 如何在指令中使用选定的 select 值传播 selected 索引

vue2js - how to propagate selected index with chosen select value in a direcitve

jquery-chosen

vuejs2

vue-directives