VueJs - 在 v-select 之后包含一个按钮答案

【问题标题】：VueJs - Include a button after a v-selectVueJs - 在 v-select 之后包含一个按钮
【发布时间】：2021-12-24 02:21:27
【问题描述】：

我是一个使用 Bootstrap-Vue 进行项目的新手，我有这样的结构

<template>
  <v-select>
    <template slot="option" slot-scope="option">
      <div class="d-center">
        {{ option.name }}
      </div>
    </template>
  </v-select>
</template>

我想在 v-select 闭包之后添加一个<b-button></b-button>，但我得到一个错误，我不知道为什么老实说。

【问题讨论】：

你的意思是像这样：</b-button> <v-select> 或用b-button></b-button> 包裹<v-select>
见input-group
在 Vue2 中，模板标签中只能有 1 个根元素 - 这意味着 v-select 为 1，b-button 为 2 - 不行。您必须将它们包装在某些东西中（例如div）。而且 BootstrapVue 中没有 v-select。 Vuetify 有 v-select。但是如果你使用的是 Vuetify，那么你需要v-btn（它没有b-button）。
它使用Vuetify的项目，没错。我尝试了<v-btn>，将两者都包装在<div> 中，但我在选择元素上遇到了一些不同的错误。

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

Vuetify 有添加元素的插槽。有好几个。

https://vuetifyjs.com/en/api/v-select/#slots

<v-select>
  <template #append>
    <v-btn>Your Button</v-btn>
  </template>
</v-select>

【讨论】：