<template>
  <div>
    <h5 :style="{'color' : widget.style.headingColor}">{{widget.text.qheading}}</h5>
    <label for="exampleFormControlInput1">{{widget.text.question}}</label>
    <select class="form-control" v-model="widget.value.Ans">
      <option value selected disabled>Please select</option>
      <option
        v-for="(optionList, index) in widget.text.Answers"
        :key="index"
        :value="optionList.value"
      >{{optionList.text}}</option>
    </select>

    <!-- <b-form-group :label="widget.text.question">
      <b-form-select v-model="widget.value.Ans">
        <option value>Please Select</option>
        <option
          v-for="(optionList, index) in widget.text.Answers"
          :key="index"
          :value="optionList.value"
        >{{optionList.text}}</option>
      </b-form-select>
    </b-form-group>-->
  </div>
</template>

<script>
export default {
  name: "dropdown",
  data: function() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false
      // selected: [], // Must be an array reference!
    };
  },
  props: {
    widget: Object
  }
};
</script>