0

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>
user3504593
  • 81
  • 1
  • 2
  • 7

2 Answers2

2

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>
Gaetan C.
  • 1,742
  • 13
  • 21
  • Thanks for your help, how about --- item-disabled --- – user3504593 Mar 16 '21 at 21:02
  • Here is direct link to the v-select items format on Vuetify V2 documentation: https://v2.vuetifyjs.com/en/api/v-select/#props-items or not-so-great latest (V3) Vuetify documentation: https://vuetifyjs.com/en/api/v-select/#props-items – Eero Niemi May 05 '23 at 07:54
0

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