Vuetify v-select + item-disabled 怎么用呢？

问题描述

样本 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',}),}
</script>

解决方法

如 Vuetify documentation 中所述，您的项目可以是具有以下属性的对象数组：

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

你的例子变成：

<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",{
        text: "buzz",value: "buzz",],}),};
</script>

,

根据此处提出的 github 问题 [仍处于开放状态]：https://github.com/vuetifyjs/vuetify/issues/5557

如果传递数组，则将其用作属性的路径（['a','b'] 是 'a.b')，而不是项目值列表。

所以现在，我们不能将数组直接传递给 item-disabled 来禁用某些选项。 正如上面的回答中提到的， 您当前的数组需要转换为对象数组才能 项目禁用工作。我们需要为需要禁用的对象传递带有 disabled:true 的对象数组。

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

这是示例 - https://codepen.io/akshayd21/pen/qBqGONz

类似问题供参考： How can I disable literal values in Vuetify? v-select deactivate some items/options