Vuetify v-select + item-disabled 怎么用？答案

【问题标题】：Vuetify v-select + item-disabled how to use it?Vuetify v-select + item-disabled 怎么用？
【发布时间】：2021-06-13 11:11:58
【问题描述】：

在样本 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>

【问题讨论】：

标签： javascript vuetify.js show v-model v-select

【解决方案1】：

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

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

因此，就目前而言，我们不能将数组直接传递给 item-disabled 以禁用某些选项。如上面的答案所述，您当前的数组需要转换为对象数组才能 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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的帮助，怎么样 --- item-disabled ---