Vuetify v-select + item-disabled how to use it?

Question

at sample of https://vuetifyjs.com/en/components/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>

Answer 1

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 becomes:

<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>

Answer 2

As per the github issue raised here [Which is still open]: https://github.com/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