vuejs2 和选择的选择问题 [英] vuejs2 and chosen select issue
问题描述
您好,请看看这个垃圾箱.它是 Vue 0.12 版本和 选择的 js.我怎样才能使它与 vue2 版本一起使用.我真的需要它作为指令而不是组件.
`Vue 模型值 <br>{{城市 |json}}<小时>选择值:<!-- 注意 `v-model` 和 `v-chosen` 的参数 --><select class="cs-select" v-model="city" options="cities" v-chosen="city"></select><select v-model="city" options="cities"></select>Vue.directive('选择', {twoWay: true,//注意双向绑定绑定:函数(){$(this.el).选择({继承选择类:真,宽度: '30%',disable_search_threshold:999}).change(function(ev) {this.set(this.el.value);}.bind(this));},更新:函数(NV,OV){//请注意,我们必须通知 selected 关于更新$(this.el).trigger("选择:更新");}});var vm = new Vue({数据: {城市:'多伦多',城市:[{文本:'多伦多',值:'多伦多'},{文本:'奥尔良',值:'奥尔良'}]}}).$mount("#search-results");
解决方案 在这里它被实现为支持 v-model
和选项插槽的包装器组件.这使它成为标准 select
小部件的直接替代品,至少就基本功能而言.updated()
会很高兴地注意到选项列表和值的变化.
由于 Vue2 不支持双向指令,我认为没有办法将其实现为指令.如果你真的需要它,你会想要使用 Vue1.
var vm = new Vue({el: '#search-results',数据: {城市:'多伦多',城市:[{文字:'多伦多',值:'多伦多'}, {文字:'奥尔良',值:'奥尔良'}]},成分: {'选择选择':{模板:'<select class="cs-select" v-model="proxyValue" ><slot></slot></select>',道具:['价值','选项'],计算:{代理值:{得到() {返回 this.value;},设置(新值){this.$emit('input', newValue);}}},安装(){$(this.$el).选择({继承选择类:真,宽度: '30%',disable_search_threshold:999}).change((ev) => {this.proxyValue = ev.target.value;});},更新() {$(this.$el).trigger('选择:更新');}}}});setTimeout(() => { vm.cities.push({text: 'Houston', value: 'Worth it'}); }, 1000);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.proto.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script><link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script><div id='搜索结果'>Vue 模型值<br>{{城市 |json}}<小时>选择值:<chosen-select v-model="city"><option v-for="item in city" :value="item.value">{{item.text}}</option></chosen-select><select v-model="city"><option v-for="item in city" :value="item.value">{{item.text}}</option></选择>
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");
解决方案 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.
var vm = new Vue({
el: '#search-results',
data: {
city: 'Toronto',
cities: [{
text: 'Toronto',
value: 'Toronto'
}, {
text: 'Orleans',
value: 'Orleans'
}]
},
components: {
'chosenSelect': {
template: '<select class="cs-select" v-model="proxyValue" ><slot></slot></select>',
props: ['value', 'options'],
computed: {
proxyValue: {
get() {
return this.value;
},
set(newValue) {
this.$emit('input', newValue);
}
}
},
mounted() {
$(this.$el)
.chosen({
inherit_select_classes: true,
width: '30%',
disable_search_threshold: 999
})
.change((ev) => {
this.proxyValue = ev.target.value;
});
},
updated() {
$(this.$el).trigger('chosen:updated');
}
}
}
});
setTimeout(() => { vm.cities.push({text: 'Houston', value: 'Worth it'}); }, 1000);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.proto.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id='search-results'>
Vue model value
<br> {{city | json}}
<hr> Select value:
<chosen-select v-model="city">
<option v-for="item in cities" :value="item.value">{{item.text}}</option>
</chosen-select>
<select v-model="city">
<option v-for="item in cities" :value="item.value">{{item.text}}</option>
</select>
</div>
这篇关于vuejs2 和选择的选择问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!