Vue Bootstrap Wrapper for Select2

VueSelect.vue

<template>
  <ValidationProvider
    ref="validator"
    v-slot="{ errors }"
    :name="errorLabel || label"
    :rules="rules"
  >
    <b-form-group
      :label="label"
      :label-for="uid"
      :invalid-feedback="errors[0]"
      :state="!errors.length"
    >
      <select
        :id="uid"
        ref="formSelect"
        class="form-control select2"
        :value="value"
      ></select>
    </b-form-group>
  </ValidationProvider>
</template>

<script lang="ts">
import { Vue, Prop, Component, Watch } from 'vue-property-decorator'
import 'select2'
import { ValidationProvider, extend, localize } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'
import id from '../../../node_modules/vee-validate/dist/locale/id.json'

localize('id', id)
extend('required', required)
extend('email', email)

@Component({ components: { ValidationProvider } })
export default class FormSelect extends Vue {
  @Prop() value!: string | number
  @Prop() preselect!: null | { id: string; name: string }
  @Prop() label!: string
  @Prop() name!: string
  @Prop() url!: string
  @Prop() items!: any[] | null
  @Prop({ default: 'Please select' }) placeholder!: string
  @Prop({ default: true }) inModal!: boolean
  @Prop({ default: '' }) errorLabel!: string
  @Prop() rules!: string
  @Prop({
    default: x => ({
      id: x.id,
      text: x.name,
    }),
    type: Function,
  })
  mapper!: () => { id: string; name: string }

  $refs!: {
    validator: any
    formSelect: any
  }

  mounted() {
    if (this.inModal) {
      return this.$root.$on('bv::modal::shown', (e, modalId) => {
        this.initSelect(modalId)
      })
    }
    this.initSelect()
  }

  destroyed() {
    $(this.$refs.formSelect)
      .off()
      .select2('destroy')
  }

  @Watch('items')
  initSelect(modalId: null | string = null) {
    const vm = this

    if ($(this.$refs.formSelect).hasClass('select2-hidden-accessible')) {
      $(this.$refs.formSelect)
        .empty()
        .off()
        .select2('destroy')
    }

    $(this.$refs.formSelect)
      .select2({
        dropdownParent: modalId
          ? $(`#${modalId}___BV_modal_content_`)
          : $(document.body),
        placeholder: this.placeholder,
        minimumResultsForSearch: 0,
        allowClear: true,
        ajax: this.url
          ? {
              url: this.url,
              delay: 250,
              processResults(data, params) {
                params.page = params.page || 1
                return {
                  results: data.data.map(vm.mapper),
                  pagination: {
                    more: data.meta.page <= data.meta.total % data.meta.perpage,
                  },
                }
              },
              data: function(params) {
                return {
                  search: params.term,
                  pagination: { page: params.page || 1 },
                }
              },
            }
          : null,
        data: this.items && !this.url ? this.items : null,
      })
      .on('select2:select', () => {
        const [selected] = $(this.$refs.formSelect).select2('data')
        this.$emit('input', selected.id, {
          id: Number(selected.id),
          name: selected.text,
        })
      })
      .on('select2:clear', () => {
        this.$emit('input', null, null)
      })

    this.updateValue()
  }

  @Watch('value')
  updateValue() {
    if (this.preselect) {
      $(this.$refs.formSelect).append(
        new Option(this.preselect.name, this.preselect.id, false, false)
      )
    }
    $(this.$refs.formSelect).val(this.value)
    $(this.$refs.formSelect).trigger('change')
  }

  @Watch('value')
  validate() {
    console.log(this.value)
    if (this.$refs.validator) {
      this.$refs.validator.validate(this.value)
    }
  }
}
</script>