1

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

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>

4

1 回答 1

2

当您在指令中发出时，您是从根节点（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())
      });
    });
  }
});

这是一个例子。

于 2017-05-31T14:25:12.237 回答