Как добавить отображение картинки для выбранного элемента во vue-select (можно и не vue-select)?

Question

<v-select :options="options" label="title">
   <template slot="option"  slot-scope="option">
     <img :src="require('@/assets/forms/russia.svg')" />
     {{ option.title }}
   </template>
 </v-select>

options: [
       {
         title: '+7',
         icon: require('@/assets/forms/russia.svg')
       },
       {
         title: '+49',
         icon: require('@/assets/forms/russia.svg')
       }
     ]

Вот такой код, который выводит выпадающий список для выбора значения, и также выводит картинку, но когда я выбираю значение и картинку, в v-select только текст, без картинки

как мне сделать, чтобы подставлялась и картинка тоже в зависимости от выбранного элемента ( решение не обязательно на vue-select )

Answer 1

Используя слот selected-option - selected-option

<template slot="selected-option" slot-scope="option">

вы сможете настроить необходимый вам вид для отображения выбранного элемента option из списка

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data() {
    return {
      options: [{
          title: '+7',
          icon: 'https://upload.wikimedia.org/wikipedia/en/thumb/f/f3/Flag_of_Russia.svg/23px-Flag_of_Russia.svg.png'
        },
        {
          title: '+49',
          icon: 'https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/Flag_of_Germany.svg/23px-Flag_of_Germany.svg.png'
        }
      ]
    }
  }
})

.pl-10 {
  padding-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css">

<div id="app">
  <v-select :options="options" label="title">
    <template slot="selected-option" slot-scope="option">
      <img :src="option.icon" />
       <span class="pl-10">{{ option.title }}</span>
    </template>
    <template slot="option" slot-scope="option">
     <img :src="option.icon" />
       <span class="pl-10">{{ option.title }}</span>
   </template>
  </v-select>

</div>

БЛОГ НА HUSL

Как добавить отображение картинки для выбранного элемента во vue-select (можно и не vue-select)?

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