在 v-autocomplete “item” 插槽中 Vuetify v-dividers

Question

我正在尝试在v-autocomplete 的列表项之间添加分隔符。我使用item 插槽覆盖默认组件，并将其替换为我自己定义的v-list-item。当我将v-divider 添加到插槽时，它不会出现。使用 Vue Devtools 检查还显示 Vuetify 嵌套了 v-list-items。当我将v-divider 添加到列表项本身时，它位于内容旁边，而不是在项目之间。这是我当前的代码，也可以在https://jsfiddle.net/k0vn2zd7/19/ 中找到

// template

<div id="app">
  <v-app>
    <v-autocomplete v-model="formData.itemId" :items="items" solo clearable prepend-inner-icon="mdi-hammer-screwdriver" type="text" item-value="id">
      <template #item="{ item, on, attrs }">
        <v-list-item two-line v-bind="attrs" v-on="on">
          <v-list-item-avatar class="elevation-1" size="64">
            {{ item.id }}
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title> {{ item.text }} </v-list-item-title>
            <v-list-item-subtitle> {{ item.id }} </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-divider inset />
      </template>
    </v-autocomplete>
  </v-app>
</div>

// script

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    items: [
      { text: "Learn JavaScript", id:"1" },
      { text: "Learn Vue", id:"2" },
      { text: "Play around in JSFiddle", id:"3" },
      { text: "Build something awesome", id:"4" }
    ],
    formData: {
        itemId: "",
    }
  },
})

---

在 vuetify 的示例中，他们在原始数组中添加了伪项目，其中包含一个带有 v-if/v-else 语句的“divider”属性，用于检查键“divider”的存在，但我的项目是从一个API，我宁愿不污染数据。我尝试使用计算属性，它在每个项目之间添加{ divider: true }，但是在过滤项目时会搞砸，如https://jsfiddle.net/k0vn2zd7/31/ 所示

// template

<div id="app">
  <v-app>
    <v-autocomplete v-model="formData.itemId" :filter="filterItems" :items="itemsWithDividers" solo clearable prepend-inner-icon="mdi-hammer-screwdriver" type="text" item-value="id">
      <template #item="{ item, on, attrs }">
      <v-divider v-if="item.divider"> </v-divider>
        <v-list-item v-else v-bind="attrs" v-on="on">
          <v-list-item-avatar class="elevation-1" size="64">
            {{ item.id }}
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title> {{ item.text }} </v-list-item-title>
            <v-list-item-subtitle> {{ item.id }} </v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-autocomplete>
  </v-app>
</div>

// script

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  computed: {
    itemsWithDividers() {
    const itemsWithDividers = [];
      this.items.forEach((x, index, array) => {
        itemsWithDividers.push(x);
        if (index !== array.length - 1) {
          itemsWithDividers.push({
            divider: true,
          });
        }
      });
      return itemsWithDividers;
    },
  },
  data: {
    items: [
      { text: "Learn JavaScript", id:"1" },
      { text: "Learn Vue", id:"2" },
      { text: "Play around in JSFiddle", id:"3" },
      { text: "Build something awesome", id:"4" }
    ],
    formData: {
        itemId: "",
    }
  },
  methods: {
    filterItems(item, queryText, itemText) {
      if (item.divider) return;
      const { text, id } = item;
      const texts = [text, id];
      return texts.some((text) => text.indexOf(queryText) > -1);
    },
  }
})

在v-autocomplete 内的 v-list 中添加分隔符的推荐方法是什么，最好不必修改数组？使用 Vuetify 2.2.12。

Answer 1

我最终通过使用v-list-item 内的分隔线来修复它，然后使用全宽 0 高度的 div 将分隔线向下推到列表项的弹性框中。灵感来自How to specify line breaks in a multi-line flexbox layout?。

<template #item="{ item, on, attrs }">
        <v-list-item
          two-line
          class="flex-wrap"
          v-bind="attrs"
          v-on="on"
        >
          <v-list-item-avatar
            class="elevation-1"
            color="#eeeeee"
            size="64"
          >
            <img :src="item.preferredImageUrl">
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title> {{ item.name }} </v-list-item-title>
            <v-list-item-subtitle> {{ item.code }} </v-list-item-subtitle>
          </v-list-item-content>
          <div style="width: 100%; height: 0;" aria-hidden="true" />
          <v-divider
            v-if="items.indexOf(item) !== items.length - 1"
            inset
          />
        </v-list-item>
      </template>