Vuetify v-select disabling items without manipulating the object

Question

I've read anywhere even in the official docs and I only found that v-select's items can only be disabled by setting the object's disable to true like this...

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

But in my case, since I am having a dynamic form where in users can create a new form by clicking a button.

Are there any way to disable v-select's item directly from the v-select tag itself or perhaps there's a slot for it?

score 1 · Answer 1 · answered Apr 12 '21 at 19:15

You need to use v-slot:item to show your customized v-list-item element.

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

After that you can control the input and the events inside, so you can disable it,

for example:

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

Vuetify v-select disabling items without manipulating the object

1 Answers1