vue2js - 選択した選択値を使用して選択したインデックスをディレクティブで伝播する方法

Question

以下のコードを見てください。最初の選択ボックスはchosen jsで作成されます。変更された場合、変更された値は、バインドされたモデル（cityid）に伝播されます。 2番目の通常選択ボックスが正常に動作し、その値が伝播します。あなたのディレクティブで放出された場合

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があります。