Cách dùng select2 và khắc phục sự kiện change không hoạt động trong vue js

28/07/2022 15:57 440

Table of Contents

Bài viết này mình sẽ cùng bạn đi giải quyết 2 vấn đề đó là cách dùng select2 như thế nào trong vue js và cách khắc phục sự kiên @change không hoạt động khi dùng select2

Cách dùng

Include thư viện

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

1 2	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Data:

Mỗi select2 sẽ cần 2 data: dự liệu được chọn và dữ liệu các option (được tổ chức gồm array các object)

dataApprove: {
        	
selectedProvince: '1',
province: [
    { value: '1', name: 'Quảng nam'	},
    { value: '2', name: 'Hà nội'	}
],
selectedDistrict: '1',
district: [
    { value: '1', name: 'Quảng nam'	},
    { value: '2', name: 'Hà nội'	}
],
selectedWard: '1',
ward: [
    { value: '1', name: 'Quảng nam'	},
    { value: '2', name: 'Hà nội'	}
],
}

dataApprove: {

selectedProvince: '1',

province: [

{ value: '1', name: 'Quảng nam' },

{ value: '2', name: 'Hà nội' }

selectedDistrict: '1',

district: [

{ value: '1', name: 'Quảng nam' },

{ value: '2', name: 'Hà nội' }

selectedWard: '1',

ward: [

{ value: '1', name: 'Quảng nam' },

{ value: '2', name: 'Hà nội' }

}

Code html

Chúng ta sẽ sử dụng v-for để tạo các option từ dữ liệu

<div class="row q-col-gutter-md q-mb-md">
<div class="col-4">
<select v-select2 @change="handleSelectedProvince"  v-model="dataApprove.selectedProvince" class="approveShopProvince" id="approveShopProvince" v-if="dataApprove.province.length > 0">
<option v-for="(item, index) in dataApprove.province" :key="index" :value="item.value">{{item.name}} </option>
</select>
</div>
<div class="col-4">
<select v-select2 @change="handleSelectedDistrict" v-model="dataApprove.selectedDistrict" class="approveShopDistrict" id="approveShopDistrict" v-if="dataApprove.district.length > 0">
<option v-for="(item, index) in dataApprove.district" :key="index" :value="item.value">{{item.name}} </option>
</select></div>
<div class="col-4">
<select v-select2 v-model="dataApprove.selectedWard" class="approveShopWard" id="approveShopWard" v-if="dataApprove.ward.length > 0">
<option v-for="(item, index) in dataApprove.ward" :key="index" :value="item.value">{{item.name}} </option>
</select></div>
</div>

</select>

</div>

</select></div>

</select></div>

</div>

Các bài viết khác có thể hữu ích với bạn

Gọi thư viện select2

Tại function updated của vue js chúng ta gọi như bên dưới

updated(){
    
    jQuery('#approveShopProvince').select2({})
    jQuery('#approveShopDistrict').select2({})
    jQuery('#approveShopWard').select2({})
    
}

updated(){

jQuery('#approveShopProvince').select2({})

jQuery('#approveShopDistrict').select2({})

jQuery('#approveShopWard').select2({})

}

Khắc phục không nhận sự kiện @change của select2 trong vue js

thêm một v-select2 để kích hoạt sự kiện change của select2

 Vue.directive('select2', {
    inserted(el) {
        jQuery(el).on('select2:select', () => {
            const event = new Event('change', { bubbles: true, cancelable: true });
            el.dispatchEvent(event);
        });

        jQuery(el).on('select2:unselect', () => {
            const event = new Event('change', {bubbles: true, cancelable: true})
            el.dispatchEvent(event)
        })
    },
});

Vue.directive('select2', {

inserted(el) {

jQuery(el).on('select2:select', () => {

const event = new Event('change', { bubbles: true, cancelable: true });

el.dispatchEvent(event);

});

jQuery(el).on('select2:unselect', () => {

const event = new Event('change', {bubbles: true, cancelable: true})

el.dispatchEvent(event)

})

});

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Làm option settings wordpress bằng vue js [ 15/10/2022 09:39 ]
Thực hiện ajax trong vòng lặp trong vue js [ 05/10/2022 01:19 ]
Import file excel tới data dùng thư viện php excel và vue js [ 01/10/2022 07:45 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]

Cách dùng select2 và khắc phục sự kiện change không hoạt động trong vue js

Cách dùng

Include thư viện

Data:

Code html

Gọi thư viện select2

Khắc phục không nhận sự kiện @change của select2 trong vue js

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)