<template>
<div>
<select class="form-control selectpicker" data-live-search="liveSearch">
<option v-for="(option, index) in options" :key="index",
                :value="option.value"
                :selected="option.selected"
                v-text="option.title">
</option>
</select>
</div>
</template>

<script>
export default {
  props: {
    liveSearch: { default: true }
  },

  mounted() {
    const $selectpicker = $(this.$el).find(".selectpicker");

    $selectpicker
      .selectpicker()
      .on("changed.bs.select", () =>
        this.$emit("change", this.options[$selectpicker.val()])
      );
  },

  updated() {
    $(this.$el)
      .find(".selectpicker")
      .selectpicker("refresh");
  },

  destroyed() {
    $(this.$el)
      .find(".selectpicker")
      .off()
      .selectpicker("destroy");
  },

  computed: {
    options() {
      return [
        {
          value: "asdfadf",
          title: "asfd",
          selected: false
        },
        {
          value: "asdfadfasdfasd",
          title: "asdf",
          selected: true
        }
      ];
    }
  }
};
</script>

<style>
.bootstrap-select .dropdown-toggle .filter-option {
  text-align: right !important;
}
.bootstrap-select .dropdown-toggle .filter-option-inner {
  padding-right: 0;
  padding-left: inherit;
}
.dropdown-toggle::after {
  float: left;
}
</style>
