Vuetify 自动完成隐藏禁用的项目答案

【问题标题】：Veutify autocomplete hide disabled itemsVuetify 自动完成隐藏禁用的项目
【发布时间】：2022-08-16 09:21:05
【问题描述】：

我已经使用 prop item-disabled 禁用了 vuetify 的 <v-autocomplete> 中的一些项目，自然这些项目仍然出现在下拉列表中。对于这种特殊情况，我怎么能，隐藏那些物品也是？

类似的自动完成功能会通过应用程序出现，但并非所有功能都应该以类似的方式运行，在某些情况下应该显示禁用的项目，而在其他情况下则不会。因此，我继续为残疾人物品添加课程。然而，这似乎没有被应用，隐藏的项目仍然出现在列表中（可能是由于 vuetify 实现下拉菜单的方式）：

<v-autocomplete 
   v-model=\"selectedItem\"
   class=\"list-hide-disabled\"
   :items=\"items\"
   :item-disabled=\"isItemDisabled\">
</v-autocomplete>

::v-deep .list-hide-disabled .v-list-item.v-list-item--disabled {
    display: none;
}

isItemDisabled(item: ListItemModel): boolean {
   return item.isDeleted;
}

过滤:items 似乎不适用，因为它还会隐藏先前的选择，在禁用之前选择的选定项目仍应呈现。 v-slot:item 似乎也没有用，因为即使内容被隐藏，它也会保留空框来代替“隐藏”项。

标签： html css vue.js vuejs2 vuetify.js

【解决方案1】：

使用班级你必须覆盖一个项目槽v-自动完成并将您的课程应用于具有已删除财产

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedItem: null,
      items: [{
        text: 'A',
        isDeleted: false
      }, {
        text: 'B',
        isDeleted: true
      }]
    }
  },
});

.list-hide-disabled {
  display: none !important
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-autocomplete v-model="selectedItem" :items="items" item-disabled="isDeleted">
      <template #item="{item, on, attrs}">
      <v-list-item v-bind="attrs" v-on="on" :class="{'list-hide-disabled': item.isDeleted}">{{item.text}}</v-list-item>
    </template>
    </v-autocomplete>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

【讨论】：

谢谢，但是全局样式会改变应用程序中每个选择/自动完成/组合框的行为。我想仅针对特定实例保留此更改，最好用list-hide-disabled 类标记，但任何范围的缩小都可以。最坏的情况是添加一个组件my-autocomplete 并将其作用于组件，但它并不理想，类或类似的会更好。
@wondra 我更新了我的答案。尝试覆盖 v-slot 时您是对的，但显然，您犯了一些小错误，导致显示效果不佳
值得指出的是，模板根不得不是<v-list-item/>，这是关键的区别。使用 list-item 时，它被用作渲染项目的根，并且可以设置样式。使用例如</span>（就像我做的那样）将导致 vuetify 渲染额外的包装器，从而有效地丢弃所有应用的类。

【解决方案2】：

我认为这不是一个 vuetify 问题，而是一个 vue 问题。如果您的目标是仅显示选择列表中的活动项目，我将使用计算属性来过滤掉所有非活动项目。这样您就不会过度复杂化您的模板代码。

<v-autocomplete 
   v-model="selectedItem"
   class="list-hide-disabled"
   :items="activeItems"
</v-autocomplete>

数据：

  data() {
    return {
      selectedItem: null,
      items: [{
        text: 'A',
        isDeleted: false
      }, {
        text: 'B',
        isDeleted: true
      }]
    }
  },
  computed: {
   activeItems() {
    return this.items.filter(item => !item.isDeleted)
   }
  }

【讨论】：