<template>
      <select :value="value" style="width: 100%">
        <option value="" selected disabled>Auswählen...</option>
        <option v-if="!options">{{ value }}</option>
        <option v-for="option in options" :value="option.value ? option.value : option.text"> 
          {{ option.text }}
        </option>
    </select>
</template>

<script>
import $ from "jquery";
import select2 from "select2";

export default {
  name: "Select2",
  props: ["value", "options", "tags", "format", "ajax"],
  mounted: function() {
    const vm = this;

    $(vm.$el)
      .select2({
        tags: vm.tags,
        // selectOnClose: true,
        ajax: vm.ajax
      })
      .on("change", function() {
        vm.$emit("input", vm.$el.value);
      });
  },
  watch: {
    value: function(value) {
      $(this.$el)
        .val(value)
        .trigger("change");
    },
    options: function(options) {
      console.log(options);
    }
  }
};
</script>