bootstrap-select + vue
Делаю компонент на vue с использованием jQuery плагина bootstrap-select и в процессе работы возникла проблема: dropdown при клике не раскрывается совсем, хотя видно, что разметка на мгновенье обновляется, как-будто событие клика дважды срабатывает или что-то идет не так. Не могу понять что конкретно я делаю не так.
<template>
<div>
<select
class="form-control"
ref="el"
:multiple="multiple"
v-model="modelSelected"
@input="$emit('change', $event.target.value)"
>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
</div>
</template>
<script>
const $ = require("jquery");
require("bootstrap");
require("bootstrap-select");
import { BFormSelect, BFormSelectOption } from "bootstrap-vue";
export default {
components: { BFormSelect, BFormSelectOption },
props: {
buttonStyle: {
type: String,
default: "",
},
countSelectedText: {
type: Function,
default: (num) => {
return `Выбрано ${num}`;
},
},
noneSelectedText: {
type: String,
default: "Выберите объект",
},
deselectAllText: {
type: String,
default: "Снять выбор со всех",
},
selectAllText: {
type: String,
default: "Выбрать все",
},
options: {
type: Array,
required: true,
},
selected: {
type: [Array, String, Object],
default: null,
},
multiple: {
type: Boolean,
default: false,
},
},
data() {
return {
modelSelected: this.selected,
};
},
model: {
prop: "selected",
event: "change",
},
mounted() {
let $el = $(this.$refs.el);
$el.selectpicker({
style: this.buttonStyle,
styleBase: "form-control",
selectedTextFormat: "count > 1",
countSelectedText: this.countSelectedText,
actionsBox: true,
deselectAllText: this.deselectAllText,
selectAllText: this.selectAllText,
noneSelectedText: this.noneSelectedText,
});
},
name: "BootstrapSelect",
};
</script>
Для тех, кто хочет посмотреть в действии: https://codesandbox.io/s/interesting-zhukovsky-f40x9?file=/src/components/BootstrapSelect.vue