<template>
  <Multiselect
    v-model="value"
    :options="options"
    :multiple="false"
    :close-on-select="true"
    :searchable="false"
    :show-labels="false"
    :allow-empty="false"
    @update:model-value="updateSelected"
    label="label"
    :placeholder="placeholder"
  />
</template>

<script>
import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.css";

export default {
  name: "InputSelect",
  components: { Multiselect },
  props: {
    placeholder: { type: String, required: true },
    options: { type: Array, required: true },
    selected: { type: String, required: false, default: null },
  },
  data() {
    return {
      value: null,
    };
  },
  methods: {
    updateSelected() {
      this.$emit("setter", this.value);
    },
  },
  beforeMount() {
    this.value = this.selected;
  },
};
</script>
