/home/henzagold/site/components/ Current File: //home/henzagold/site/components/select2.vue
<template>
  <div class="acr-custom-select form-group" >
    <label>{{ title }}</label>
    <select class="acr-select2" :id="uniqueId"  :multiple="multiple">
      <option label="Price Range"></option>
      <option  v-for="(item,index) in options" :value="item.value" :selected="item.value==value" >{{ item.title }}</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "select2",
  data(){
    return {
      option:{
        allowClear: false,
        minimumResultsForSearch:this.searchable ? 0:-1,
      },
      content: this.value,
    }
  },
  methods:{
    change(){
      $(`#${this.uniqueId}`).select2(this.option);
      $(`#${this.uniqueId}`).on('change', (e)=> {
        this.$emit('input', $(`#${this.uniqueId}`).find(":selected").val());
      });
    }
  },
  props:{
    uniqueId:{
      type:String,
      default:'select_2_'+Date.now(),
      required:true
    },
    title:{
      type:String,
      default:'',
      required: false
    },
    searchable:{
      type:Boolean,
      default:false,
      required: false
    },
    multiple:{
      type:Boolean,
      default:false,
      required: false
    },
    options: {
      type:Array,
      default:'',
      required:false
    },
    value:{},
  },
  computed:{

  },
  watch:{

  },
  created() {


  },
  updated() {
    this.change();
  },
  mounted() {

    this.change();







  }
}
</script>

<style scoped>

</style>