1

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

введите сюда описание изображения

Ниже код:

    <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 нельзя стилизовать, как мне решить данную проблему? И в кнопку нужно передавать тот город, который был выбран из списка.

1 ответ 1

1

Используйте вместо option другой тег с поддержкой v-modelinput[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 – это будет строка с выбранным городом.

3
  • Спасибо. Но по какой-то причине, при клике на любой город, выбираются все (ставится чекбокс). upd: моя ошибка
    – Alex
    26 авг 2021 в 13:01
  • value поставили? 26 авг 2021 в 13:02
  • Выделялись все чекбоксы по причине, что я добавил selectedRegion в пропсы. Но если этого не сделать, то в консоли ошибка вида: Property or method selectedRegion is not defined on the instance
    – Alex
    26 авг 2021 в 13:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.