I've created a simple select menu (dropdown) using bootstrap Vue. My question is how do I insert a button and an input element inside the dropdown list. Below is an example of what I want to achieve, and my current code.

Update I am still trying to solve this issue, any help is greatly appreciated

Picture1: Button inserted at the bottom of the dropdown list

enter image description here

Picture2: When user clicks on the button, there will be an input field for them to enter a value. The value will automatically be inserted to the dropdown list enter image description here

Current Code

    <template>
  <b-container class="empty-container">
    <b-row align-h="center">
      <b-col cols="6">
        <b-form-select v-model="selected" :options="options"></b-form-select>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Please select an option" },
        { value: "a", text: "This is First option" },
        { value: "b", text: "Selected Option" },
        { value: { C: "3PO" }, text: "This is an option with object value" }
      ]
    };
  }
};
</script>

<style>
</style>

1 Answers

0
axecopfire On

I don't know if you'll be able to use the browser's standard dropdown menu. The reason I'm thinking is that you won't be able to reliably select the html of browser specific dropdowns. So I would build my own dropdown and if the last option was clicked convert it to an <input type='text' > and grab the value from that.