V-选择多个自定义文本

问题描述

我正在尝试使用多个复选框填充 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>

解决方法

试试这个

<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>