如何在 vuetify 中进行多选时在下拉项旁边显示自定义内容？

Question

在 vuetify 中，我想显示一个下拉列表，但对于每个项目，我想有一个槽来显示它旁边的东西，比如图标，但在文本的右侧。但也有多个 select.

这个例子不起作用，它在我添加插槽时删除了复选框

https://codepen.io/Sneaky6666/pen/KKyqNaB?editors=101

<div id="app">
  <v-app id="inspire">
      <v-autocomplete
        v-model="selectedFruits"
        :items="fruits"
        label="Favorite Fruits"
        multiple
      >
        <template v-slot:item="{item}">
          {{item}}
        </template>
      </v-autocomplete>
    </v-container>
  </v-app>
</div>

js

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    fruits: [
      'Apples',
      'Apricots',
      'Avocado',
      'Bananas',
      'Blueberries',
      'Blackberries',
      'Boysenberries',
      'Bread fruit',
      'Cantaloupes (cantalope)',
      'Cherries',
      'Cranberries',
      'Cucumbers',
      'Currants',
      'Dates',
      'Eggplant',
      'Figs',
      'Grapes',
      'Grapefruit',
      'Guava',
      'Honeydew melons',
      'Huckleberries',
      'Kiwis',
      'Kumquat',
      'Lemons',
      'Limes',
      'Mangos',
      'Mulberries',
      'Muskmelon',
      'Nectarines',
      'Olives',
      'Oranges',
      'Papaya',
      'Peaches',
      'Pears',
      'Persimmon',
      'Pineapple',
      'Plums',
      'Pomegranate',
      'Raspberries',
      'Rose Apple',
      'Starfruit',
      'Strawberries',
      'Tangerines',
      'Tomatoes',
      'Watermelons',
      'Zucchini',
    ],
    selectedFruits: [],
  }),

  computed: {
    likesAllFruit () {
      return this.selectedFruits.length === this.fruits.length
    },
    likesSomeFruit () {
      return this.selectedFruits.length > 0 && !this.likesAllFruit
    },
    icon () {
      if (this.likesAllFruit) return 'mdi-close-box'
      if (this.likesSomeFruit) return 'mdi-minus-box'
      return 'mdi-checkbox-blank-outline'
    },
  },

  methods: {
    toggle () {
      this.$nextTick(() => {
        if (this.likesAllFruit) {
          this.selectedFruits = []
        } else {
          this.selectedFruits = this.fruits.slice()
        }
      })
    },
  },
})

Answer 1

解决方法是将项目设为 v-checkbox，并使用其 label 和 append-icon 属性：

<v-autocomplete
  v-model="selectedFruits"
  :items="fruits"
  label="Favorite Fruits"
  multiple
>
  <template v-slot:item="{ on, attrs, item }">
    <v-checkbox v-on="on" v-bind="attrs" append-icon="people" :label="item"></v-checkbox>
  </template>
</v-autocomplete>

attrs 绑定导致底层原生复选框出于某种原因出现，但您可以使用 CSS:

隐藏它

.v-input--selection-controls__input > input {
  display: none;
}

此解决方案的另一个怪癖是单击标签不会切换复选框，但明确（重新）转发 click 事件似乎在我的测试中有效：

<v-checkbox v-on="on" @click="on.click($event)">

demo

如何在 vuetify 中进行多选时在下拉项旁边显示自定义内容？

How to show custom content beside dropdown items while being multiselect in vuetify?

html

javascript

vue.js

vuetify.js