我在 vuejs 中使用 select2,我发现 vuejs 不能使用 jquery select2,因为 vuejs 使用的是 navite html。
我正在使用这段代码
Vue.directive('select', {
twoWay: true,
bind: function () {
$(this.el).select2()
.on("select2:select", function(e) {
this.set($(this.el).val());
}.bind(this));
},
update: function(nv, ov) {
$(this.el).trigger("change");
}
});
var app = new Vue({
el: '#app',
data: {
supplier_id: "niklesh"
}
})
$('#supplier_id').select2({});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
{{ supplier_id }}
<select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
<option value="atul">Atul</option>
<option value="niklesh">Niklesh</option>
<option value="sachin">Sachin</option>
</select>
</div>
请分享您的回复以处理此问题。
最佳答案
要让它与指令一起工作,我们需要了解 v-model
的工作原理。来自docs :
<input v-model="something">
is just syntactic sugar for:
<input v-bind:value="something" v-on:input="something = $event.target.value">
在选择元素的情况下,v-model
将监听 change
事件(不是 input
)。因此,如果指令在元素更改时分派(dispatch) change
事件,则 v-model
将按预期工作。
这是您的代码的更新版本(适用于 Vue 2):
Vue.directive('select', {
twoWay: true,
bind: function (el, binding, vnode) {
$(el).select2().on("select2:select", (e) => {
// v-model looks for
// - an event named "change"
// - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', { target: e.target }));
});
},
componentUpdated: function(el, me) {
// update the selection if the value is changed externally
$(el).trigger("change");
}
});
var app = new Vue({
el: '#app',
data: {
supplier_id: "niklesh"
},
})
$('#supplier_id').select2({});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
{{ supplier_id }}
<select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
<option value="atul">Atul</option>
<option value="niklesh">Niklesh</option>
<option value="sachin">Sachin</option>
</select>
</div>
这是一个适用于 Vue 3 的版本(自定义指令具有不同的语法,linked here):
var app = Vue.createApp({
data: function() {
return {
supplier_id: "niklesh"
}
}
})
app.directive('select', {
beforeMount: function (el, binding, vnode) {
$(el).select2().on("select2:select", (e) => {
// v-model looks for
// - an event named "change"
// - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', { target: e.target }));
});
},
updated: function(el) {
// update the selection if the value is changed externally
$(el).trigger("change");
}
});
app.mount('#app');
$('#supplier_id').select2({});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://unpkg.com/vue@3.0.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css">
<div id="app">
{{ supplier_id }}
<select id="supplier_id" class='form-control' v-model='supplier_id' v-select='supplier_id'>
<option value="atul">Atul</option>
<option value="niklesh">Niklesh</option>
<option value="sachin">Sachin</option>
</select>
</div>
关于javascript - Select2 on change 事件在 Vuejs 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40973841/