Проблема такая, имеется выпадающий список с названиями стран. Требуется добавить иконку с флагом каждой страны слева от названия. Все картинки в формате .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="">`
Всем заранее спасибо за ответы.
option
не поддерживаетimg
- верно. Поэтому, убираешьselect
coption
и верстаешь то же самое кастомным компонентом (черезul
сli
: элементыli
могут содержатьimg
).