<template>
  <span>
    <b-dropdown
      v-model="dropDownModel"
      style="padding:5px 5px 5px 5px;"
      aria-role="list"
      :hoverable="hoverable"
      :disabled="disabled"
    >
      <template v-if="dropDownData.data.length > 0">
        <button
          slot="trigger"
          class="button is-info"
        >
          <span>{{ label }}</span>
        </button>
        <b-dropdown-item
          v-for="todo in this.dropDownData.data"
          :key="todo.name"
          aria-role="listitem"
          :value="todo"
        >{{ todo.name }}</b-dropdown-item>
      </template>
      <template v-else>
        <button
          slot="trigger"
          class="button is-info"
        >
          <span>no Items</span>
        </button>
      </template>
    </b-dropdown>
  </span>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
    },
    dropDownData: {
      type: Object,
    },
    hoverable: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      dropDownModel: '',
    };
  },
  watch: {},
};
</script>
