Vue2js - how to distribute selected index with selected selection value in directive

Question

Please see the code below. The first selection field is created using selected js . When changing, it must extend its changed value to the model to which it is attached ( cityid ). The second normal selection block is working fine and its value is propagating.

 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.imtqy.com/chosen/chosen.jquery.js"></script> <link rel="stylesheet" href="https://harvesthq.imtqy.com/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

When you emit your directive, you emit an event from the root of the node ( context ). You must throw an event from the node itself. You do not have access to the $ emit event, but you can check the handlers that were bound to the node. In this case, v-model uses the change handler. Thus, if you write your directive like this, your code should work.

 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()) }); }); } }); 

Here is an example .