0

Проблема такая, имеется выпадающий список с названиями стран. Требуется добавить иконку с флагом каждой страны слева от названия. Все картинки в формате .svg соответственно. Вот так выглядит код, который рендерит список со странами:

           <select v-model="defCountry">
            <option
              v-for="item in countries"
              :selected="item.def"
              :key="item.key"
              :value="{key: item.key, val: item.val, def: item.def}"
            >
              {{item.val}}
            </option>
          </select>

То есть, у Австралии key AU, следовательно картинка должна быть AU.svg.

Вот таким образом я получаю названия стран:

this.countries = Object.entries(countriesList).map(([key, {name}]) => (
  {'key': key, 'val': name, 'def': false} 
))

Проблема заключается в том, что option не поддерживает img и я не могу просто напрямую добавить. Также я пробовал добавлять в объект поле, в котором бы был этот тэг, а потом рендерить его в HTML, но это не сработало. Много ещё чего перепробовал, но никак.

'img': `<img :src="" width="15" height="15" alt="">`

Всем заранее спасибо за ответы.

1
  • Проблема заключается в том, что option не поддерживает img - верно. Поэтому, убираешь select c option и верстаешь то же самое кастомным компонентом (через ul с li: элементы li могут содержать img).
    – yar85
    30 июл 2021 в 14:26

2 ответа 2

2

Стандартный select вместе со всеми option'ами рендерится стилями браузера/ОС.

То, что вы хотите реализовать (и так, как вы хотите это реализовать) невозможно (ладно, может сейчас есть какие-нибудь CSS-хаки, которые бы позволили изменять стандартный вид select'ов, но я о таких не знаю и использовать крайней не рекомендую).

Либо делайте велосипед, реализующий функционал select'а, либо используйте готовые решения, коих как минимум сотни. Фраза для поиска - "vue custom select".

0
option:after {
    content: " ";
    height: 15px;
    width: 15px;
    background-img: url();
    display: inline-block;
}
2
  • также можна юзать :before, удачики 30 июл 2021 в 17:46
  • Без шансов, ничего из этого не работает. Впрочем неважно, я уже решил это 31 июл 2021 в 8:52

Ваш ответ

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

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