Как добавить картинку в выпадающие меню во VueJS

Question

Проблема такая, имеется выпадающий список с названиями стран. Требуется добавить иконку с флагом каждой страны слева от названия. Все картинки в формате .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="">`

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

Answer 1

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

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

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

Answer 2

option:after {
    content: " ";
    height: 15px;
    width: 15px;
    background-img: url();
    display: inline-block;
}

БЛОГ НА HUSL

Как добавить картинку в выпадающие меню во VueJS

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