[英]Select2 on change event is not working in Vuejs
我在 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
是如何工作的。 從文檔:
<input v-model="something">
只是語法糖:
<input v-bind:value="something" v-on:input="something = $event.target.value">
在 select 元素的情況下, v-model
將監聽change
事件(不是input
)。 因此,如果指令在元素更改時調度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 的版本(自定義指令有不同的語法, 鏈接在這里):
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>
通過將 select2 值分配給 vuejs 數據,我能夠解決這個問題。 我在這里沒有使用自定義指令。
var app = new Vue({ el: '#app', data: { supplier_id: "niklesh" }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }); $('#supplier_id').on("change",function(){ app.supplier_id = $(this).val(); console.log('Name : '+$(this).val()); }); $('#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"> Name : {{ supplier_id | capitalize }} <select id="supplier_id" class='form-control' v-model='supplier_id'> <option value="atul">Atul</option> <option value="niklesh">Niklesh</option> <option value="sachin">Sachin</option> </select> </div>
如果這不是好方法或您建議的任何更好的解決方案,請發表評論。
<select v-model="selected">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
const self = this;
$("select").change(function () {
const val = $(this).find("option:selected").val();
self.selected = val;
});
嘗試在您的選擇控件中添加v-on:change="onChange"
HTML 模板
<select id="supplier_id" class='form-control'
v-model='supplier_id' v-select='supplier_id' v-on:change="onChange">
<option value="atul">Atul</option>
<option value="niklesh">Niklesh</option>
<option value="sachin">Sachin</option>
</select>
“onChange”是您的方法的名稱
JavaScript
methods: {
onChange(e) {
alert("Change");
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.