Как добавить кнопку и элемент ввода в выпадающий список

Question

Я создал простое меню выбора (выпадающее меню) с помощью начальной загрузки Vue.У меня вопрос, как мне вставить кнопку и элемент ввода в раскрывающемся списке.Ниже приведен пример того, чего я хочу достичь, и мой текущий код.

Обновление Я все еще пытаюсь решить эту проблему, любая помощь очень ценится

Picture1: Кнопка вставлена ​​внизу выпадающего списка

Изображение2: когда пользователь нажимает на кнопку, появляется поле для ввода данных.ценность.Значение будет автоматически добавлено в раскрывающийся список

Текущий код

    <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>

Answer 1

Я не знаю, сможете ли вы использовать стандартное выпадающее меню браузера.Причина, по которой я думаю, заключается в том, что вы не сможете надежно выбрать HTML-код определенных браузеров.Так что я бы построил свой выпадающий список и, если щелкнуть по последней опции, преобразовал бы ее в <input type='text' > и получил бы значение из этого.