V-选择多个自定义文本答案

【问题标题】：V-select multiple with custom textV-选择多个自定义文本
【发布时间】：2021-05-13 17:53:48
【问题描述】：

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

【问题讨论】：

因为您要覆盖默认的项目渲染 - 您需要在插槽中包含复选框。

标签： html vue.js vuetify.js v-select

【解决方案1】：

我做了以下，看起来类似于 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>

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：