Как сохранять картинки от опций vue-select.org?

Question

[Alianos]

Здравствуйте, изза необходимости в красивом-анимированом select-e языков я использою vue-select.org, однако в нем svg насколько я понимаю прийдется хранить в data, тоесть у меня получится

data: {
    options: [
      {
          title: 'Read the Docs',
          svg: '<svg>...</svg>',
        },
]
}

Насколько хорошый ето подход, не лучше ли описать опции в html и картинки в div-ах (как в обычном селекте)?
Как вы делали б свою реализацыю селекта на div-ах?

Comments

[Дмитрий Баскаков]

SVG можно импортировать, если я не ошибаюсь, и затем использовать как константу внутри кода. Например:

import ruLangIcon from "../../assets/img/icons/ru-lang-icon.svg/"

...

data:{
  options:[
    { 
      title:  "ru"
      svg: ruLangIcon
    }
  ]
}

Ещё можно, не знаю так ли это в этом компоненте, вручную забить все options и там уже более красиво все оформить с атрибутами data и прочим.

Не знаю поможет ли это чем-нибудь)

Answer 1

[lavezzi1]

Это плохая практика. Самый оптимальный вариант, использовать slot option, как указано в api:

<template>
  <v-select :options="books" label="title">
    <template #option="{ title, author }">
      <h3 style="margin: 0">{{ title }}</h3>
      <em>{{ author.firstName }} {{ author.lastName }}</em>
    </template>
  </v-select>
</template>

И здесь уже разруливать, какая картинка должна рендериться.

Comments

[Alianos]

Спасибо, но ненайдется ли у вас примера пожалуйста, ну тоетсь я понимаю что картинка как в api https://vue-select.org/api/slots.html#option должна быть на месте title, но я все-равно не вижу другого способа как поставить ее в js-массив... Что значит'<svg>.../*куча кода*/...</svg>'
Не будет ли другой реализации селекта где опции располагаются в div а не js... Как аналог vue-select...

[lavezzi1]

Вариантов как можно красиво штуки 2-3. Например, самый просто, добавить тег image, и в src указывать путь к папке с файлами и например сокращенное название страны, типа такого:

<template #option="option">
    <img :src="`../assets/countries/${option.slug}.svg`" alt="flag" width="32" height="32" />
</template>