html - V-选择多个自定义文本

Question

我正在尝试使用多个复选框填充 vuetify 1.5 中的 v-select 组件，然后问题是<template slot='item' slot-scope='{ item }'></template>从它添加时不会显示复选框，但没有它也可以正常工作。知道为什么会这样吗？

代码

 <v-select
      label="Select Image"
      v-model="selectedRepoImage"
      :items="repoImages"
      item-text="name"
      item-value="repo_image_id"
      return-object
      :readonly="hasScanSchedId"
      multiple
  >
          <template slot='selection' slot-scope='{ item }'>
                  {{ item.name }}:{{ item.tag }}
          </template>
          <template slot='item' slot-scope='{ item }'>
                  {{ item.name }}:{{ item.tag }}
          </template>
  </v-select>

Answer 1

尝试这个

<v-select
  label="Options"
  multiple
  v-model="selected"
  :items="items">
  <template
    v-slot:item="{ item, on, attrs }">
    <h1
      v-bind="attrs" style="width: 100%;">
      <v-switch
       :value="selected.includes(item.value)"
        style="display: inline-block"/>
      {{ item.text }}
    </h1>
  </template>
</v-select>

<script>
export default {
  data() {
    return {
      selected: [],
      items: [{ text: 'A', value: 'a'}, { text: 'B', value: 'b'}]
    }
  }
}
</script>

Answer 2

我做了以下，看起来类似于 v-select 的默认功能。

<v-select
    label="My Selections"
    v-model="myobject.items"
    :items="allitems"
    multiple>
    <template v-slot:item="{item}">
        <v-icon 
            v-if="myobject.items !== null && myobject.items.includes(item.value)" 
            color="primary" 
            class="mr-3">
            mdi-checkbox-marked
        </v-icon>
        <v-icon v-else class="mr-3">
            mdi-checkbox-blank-outline
        </v-icon>
        {{item.text}} {{ item.value }}
    </template>
</v-select>