techinplanet staffAsked By: Anonymous
Good day, pls have a look at this bin. It was written Vue 0.12 version and chosen js. How can i make it work with vue2 version. i really need this as a directive not as a component.
`<div id='search`-results'>
Vue model value <br>
{{city | json}}
<hr>
Select value:
<!-- note the `v-model` and argument for `v-chosen` -->
<select class="cs-select" v-model="city" options="cities" v-chosen="city"></select>
<select v-model="city" options="cities"></select>
Vue.directive('chosen', {
twoWay: true, // note the two-way binding
bind: function () {
$(this.el)
.chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999
})
.change(function(ev) {
this.set(this.el.value);
}.bind(this));
},
update: function(nv, ov) {
// note that we have to notify chosen about update
$(this.el).trigger("chosen:updated");
}
});
var vm = new Vue({
data: {
city: 'Toronto',
cities: [{text: 'Toronto', value: 'Toronto'},
{text: 'Orleans', value: 'Orleans'}]
}
}).$mount("#search-results");
Solution
Answered By: Anonymous
Here it is implemented as a wrapper component that supports v-model and a slot for the options. This makes it a drop-in replacement for a standard select widget, at least as far as basic functionality. The updated(), happily, will notice changes to the options list as well as to the value.
Since two-way directives are not supported in Vue2, I do not believe there is a way to implement this as a directive. If you really need that, you will want to use Vue1.
_x000D_
_x000D_
var vm = new Vue({_x000D_
el: '#search-results',_x000D_
data: {_x000D_
city: 'Toronto',_x000D_
cities: [{_x000D_
text: 'Toronto',_x000D_
value: 'Toronto'_x000D_
}, {_x000D_
text: 'Orleans',_x000D_
value: 'Orleans'_x000D_
}]_x000D_
},_x000D_
components: {_x000D_
'chosenSelect': {_x000D_
template: '<select class="cs-select" v-model="proxyValue" ><slot></slot></select>',_x000D_
props: ['value', 'options'],_x000D_
computed: {_x000D_
proxyValue: {_x000D_
get() {_x000D_
return this.value;_x000D_
},_x000D_
set(newValue) {_x000D_
this.$emit('input', newValue);_x000D_
}_x000D_
}_x000D_
},_x000D_
mounted() {_x000D_
$(this.$el)_x000D_
.chosen({_x000D_
inherit_select_classes: true,_x000D_
width: '30%',_x000D_
disable_search_threshold: 999_x000D_
})_x000D_
.change((ev) => {_x000D_
this.proxyValue = ev.target.value;_x000D_
});_x000D_
},_x000D_
updated() {_x000D_
$(this.$el).trigger('chosen:updated');_x000D_
}_x000D_
}_x000D_
}_x000D_
});_x000D_
_x000D_
setTimeout(() => { vm.cities.push({text: 'Houston', value: 'Worth it'}); }, 1000);_x000D_
<a href="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js</a>_x000D_
<a href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.proto.min.js">//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.proto.min.js</a>_x000D_
<a href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js</a>_x000D_
<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />_x000D_
<a href="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js">//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js</a>_x000D_
<div id='search-results'>_x000D_
Vue model value_x000D_
<br> {{city | json}}_x000D_
<hr> Select value:_x000D_
<chosen-select v-model="city">_x000D_
<option v-for="item in cities" :value="item.value">{{item.text}}</option>_x000D_
</chosen-select>_x000D_
_x000D_
<select v-model="city">_x000D_
<option v-for="item in cities" :value="item.value">{{item.text}}</option>_x000D_
</select>_x000D_
</div>_x000D_
_x000D_
x000D
