How to save images from vue-select.org options?

Question

Vue.js

Hello, due to the need for a beautiful-animated select-e language, I use vue-select.org, however, as far as I understand, svg will have to be stored in data in it, that is, I will succeed

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

How good is this approach, wouldn't it be better to describe options in html and pictures in divs (as in a normal select)?
How would you do your implementation of the select on divs?

Answer 1

This is bad practice. The most optimal option is to use the slot option as specified in the 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>

And here it is already to sort out which picture should be rendered.