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


Ответы (0 шт):