Veutify autocomplete hide disabled items-CodePudding

I have disabled some of the items in vuetify's <v-autocomplete> using the prop item-disabled, naturally these items still appear in the dropdown. How can I, for this particular instance, hide those items as well?

Similar autocompletes appear through the application but not all should behave in similar way, for some instances the disabled items should be shown, for others not. Because of that I went ahead and added class for disabled items. This, however, doesnt seem to be applied and hidden item still appear in the list (probably due to the way vuetify implements dropdowns):

<v-autocomplete 
   v-model="selectedItem"
   
   :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;
}

filtering :items doesnt seem to be applicable because it will also hide prior selections, selected items chosen before disabling should still render. The v-slot:item also appears to be of no use because even if the content is hidden, it will keep empty box in place of the 'hidden' item.

CodePudding user response：

To use class you have to overwrite an item slot for v-autocomplete and applied your class to the item that has an isDeleted property

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" :>{{item.text}}</v-list-item>
    </template>
    </v-autocomplete>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>