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 you have read our privacy policy.

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