Question

我想用文本和图片创建下拉菜单。我是按照手册中的代码编写的，这里是链接https://vue-select.org/guide/slots.html

请帮助我。

<v-select :options="options" label="title">
    <template slot="option" slot-scope="option">
        <img :src="option.cardImage">
        {{ option.title }}
    </template>
</v-select>



options: [{
    title: "country1",
    cardImage: "images/flag-20.png"

},
{
    title: "country2",
    cardImage: "images/flag``-21.png"

}
]

Answer 1

我认为cardImage的位置不正确。检查一下：

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

new Vue({
  el: '#app',
  data: {
    options: [{
    title: "country1",
    cardImage: "https://via.placeholder.com/20"

},
{
    title: "country2",
    cardImage: "https://via.placeholder.com/20"

}
]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@3.0.2"></script>

<div id="app">
  <v-select :options="options" label="title">
    <template slot="option" slot-scope="option">
        <img :src="option.cardImage">
        {{ option.title }}
    </template>
  </v-select>
</div>

将图像和文本添加到Vue Select下拉列表

1 个答案: