Question

我正在尝试在v-autocomplete的列表项之间添加分隔符。我使用item插槽来覆盖默认组件，并用我自己定义的v-list-item替换了它。当我向插槽添加v-divider时，它不会出现。通过Vue Devtools进行的检查还表明，Vuetify嵌套了v-list-item。当我将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的示例中，它们在原始数组中添加伪项目，其中包含带有'divider'属性的v-if / v-else语句，用于检查键'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 height div将分隔符向下推到列表项的flexbox中来对其进行修复。受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>

在v-autocomplete“项目”广告位中Vuetify v-分隔线

1 个答案: