Выпадающий список с выбором города vue

Question

Нужно, чтобы по клику на кнопку с названием города, допустим, Москва. Выпадал список, вида как на скриншоте:

Ниже код:

    <select name='' id=''>
      <option :value='item.seo_name' v-for='item in region' :key='item.name'>{{ item.name }}</option>
    </select>

Вью:

<script>
 export default {
  props: {
   region: {
    type: Array,
    default: () => []
   }
  }
 };

</script>

К сожалению, option нельзя стилизовать, как мне решить данную проблему? И в кнопку нужно передавать тот город, который был выбран из списка.

Answer 1

Используйте вместо option другой тег с поддержкой v-model – input[type='checkbox']:

<label
    v-for="item in region"
    :key="item.name"
>
    <input v-model="selectedRegion" :value="item.name" type="checkbox">
    <span>{{ item.name }}</span>
</label>

Сами чекбоксы стилями можно скрыть, но при этом на них останется работать v-model и передаваться параметр из value. Сам город можно в span выводить. Собственно selectedRegion – это будет строка с выбранным городом.

БЛОГ НА HUSL

Выпадающий список с выбором города vue

Ответы (1 шт):