在自动完成功能的复选框标签中添加图像

Question

我有一个带有 的表单，允许用户最多选择 2 个选项。我想自定义下拉菜单中显示的选项。这是我现在的代码：

    <v-autocomplete
      :items="filteredItems"
      v-model="selectedItems"
      item-title="name"
      chips
      multiple
      return-object
      closable-chips
    >
      <template v-slot:chip="{ props, item }">
        <v-chip
          v-bind="props"
          :prepend-avatar="item.raw.image"
          :title="item.raw.name"
        ></v-chip>
      </template>

      <template v-slot:default="{ item }">
          <v-checkbox>
            <template v-slot:label>
              <v-avatar size="20">
                <img
                  :src="item.raw.image"
                  alt="item.name"
                  width="20"
              /></v-avatar>
            </template>
          </v-checkbox>
      </template>

    </v-autocomplete>

我想为每个选项显示一个复选框，以及图像和标签。但是，图像在我当前的代码中无法正确显示。复选框状态必须与所选选项同步。我尝试了很多方法，但无法同时使用（复选框和图像）。

Answer 1

VAutocomplete 没有

default

插槽，您正在寻找

item

插槽。

根据docs，项目槽填充了v-list，因此第一个子项应该是v-list-item。这会给你这样的东西：

<v-autocomplete ...>
  <template v-slot:item="{ item, props }">

    <v-list-item v-bind="props">
      <template #prepend>

        <v-checkbox hide-details>
          <template v-slot:label>
            <v-avatar size="20">
              <img :src="item.raw.image" alt="item.name" width="20"/>
            </v-avatar>
          </template>
        </v-checkbox>

      </template>
    </v-list-item>

  </template>
</v-autocomplete>

这是在游乐场