at sample of

<v-select
          v-model="value"
          :items="items"          
          multiple
          item-disabled=['foo','fizz'] //read only not work?
></v-select>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      value: ['foo', 'bar', 'fizz', 'buzz'],
    }),
  }
</script>

at sample of https://vuetifyjs./en/ponents/selects/#multiple

<v-select
          v-model="value"
          :items="items"          
          multiple
          item-disabled=['foo','fizz'] //read only not work?
></v-select>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      value: ['foo', 'bar', 'fizz', 'buzz'],
    }),
  }
</script>

• javascript
• vuetify.js
• show
• v-model
• v-select

3 Answers 3

As mentioned in the Vuetify documentation, your items can be an array of objects with the following properties:

{
  text: string | number | object,
  value: string | number | object,
  disabled: boolean,
  divider: boolean,
  header: string
}

Your example bees:

<template>
  <v-select
    v-model="value"
    :items="items"          
    multiple
  ></v-select>
</template>

<script>
export default {
  data: () => ({
    items: [
      {
        text: "foo",
        value: "foo",
        disabled: true,
      },
      {
        text: "bar",
        value: "bar",
      },
      {
        text: "fizz",
        value: "fizz",
        disabled: true,
      },
      {
        text: "buzz",
        value: "buzz",
      },
    ],
  }),
};
</script>

For vuetify versions above 3.0.0 you can use the item slot template, where you can customize the v-list-item

<v-select
    :items="items"
    v-model="itemsSelected"
    item-title="title"
    item-value="id"
    multiple
  >
    <template v-slot:item="{ props, item }">
      <v-list-item
        v-bind="props"
        :subtitle="item.raw.department"
        :disabled="item.raw.disabled"
      ></v-list-item>
    </template>
  </v-select>

items disabled property can be customized, or you can write your own function

const items = [
{
  title: 'Anästhesie',
  id: 442,
  disabled: false,
},
{
  title: 'Anästhesie disabled',
  id: 443,
  disabled: true,
},

]

code sample on vuetify play

As per the github issue raised here [Which is still open]: https://github./vuetifyjs/vuetify/issues/5557

If an array is passed it's used as a path to a property (['a', 'b'] is 'a.b'), not a list of item values.

So as per now, we cannot pass array directly to item-disabled to make some options disabled. As mentioned in above answer, Your current array needs to be converted to array of objects in order for item-disabled to work. We need to pass array of objects with disabled:true for the objects that needs to be disabled.

  [
      {text: 'Bar', value: 'Bar'}, 
      {text: 'Gizz - Disabled', value: 'Gizz', disabled: true}
  ]

Here is the example - https://codepen.io/akshayd21/pen/qBqGONz

Similar questions for reference: How can I disable literal values in Vuetify? v-select deactivate some items/options