<template>
  <li @click="onSelect(k, v)">
    <a :data-value="k" :data-label="v">
      <div v-html="v"></div>
    </a>
  </li>
</template>

<script>
export default {
  name: "bc-dropdown-option",
  props: {
    k: {
      type: [Number, String],
      default: null,
    },
    v: {
      type: [Number, String],
      default: null,
    },
    is_slot: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.is_slot) {
        this.$parent.$emit("mounted", { key: this.k, value: this.v });
      }
    });
  },
  methods: {
    onSelect(k, v) {
      if (this.is_slot) {
        this.$parent.$emit("select", { key: k, value: v });
      } else {
        this.$emit("select", { key: k, value: v });
      }
    },
  },
};
</script>
