Vuetify v-select 在不操作对象的情况下禁用项目答案

【问题标题】：Vuetify v-select disabling items without manipulating the objectVuetify v-select 在不操作对象的情况下禁用项目
【发布时间】：2021-04-12 18:55:57
【问题描述】：

我什至在官方文档中的任何地方都阅读过，我只发现v-select 的项目只能通过将对象的disable 设置为 true 来禁用，就像这样...

{text: 'text1', disabled: true}, //disabled
{text: 'text2', disabled: false}, //enabled
{text: 'text2', disabled: true}, //disabled

但就我而言，因为我有一个动态表单，用户可以通过单击按钮创建新表单。

有什么方法可以直接从v-select 标签本身禁用v-select 的项目，或者可能有一个插槽？

【问题讨论】：

标签： vue.js vuetify.js v-select

【解决方案1】：

您需要使用v-slot:item 来显示您自定义的v-list-item 元素。

https://vuetifyjs.com/en/api/v-select/#slots-item

之后你可以控制输入和里面的事件，所以你可以禁用它，

例如：

    <v-select :items="[{ name: 'item1', disabled: false }, { name: 'item2', disabled: true }]">
        <template v-slot:item="{ on, item }">
            <v-list-item v-on="on" :disabled="item.disabled">{{ item.name }}</v-list-item>
        </template>
    </v-select>

【讨论】：