v-select deactivate some items/options

Question

I am using vuetify's to display dropdowns. The options come from my components data. What I would like to do now is to deactivate only some of the items in the v-select. What items are deactivated and which are activated will later on depend on the user input. I can only find the option to deactivate the whole v-select like by adding disabled="true" to the v-select.

My code looks like this right now:

                          <v-row
                            v-for="(part, index) in xy"
                            :key="index">
                                <v-col md="3" sm="3">
                                    <v-card ripple >
                                    <v-img
                                        src="src/assets/test.PNG"
                                    ></v-img>
                                    </v-card>
                                </v-col>
                                <v-col md="8" sm="3">
                                    <v-select
                                    v- model="dropdownValues[index]"
                                    :items="part"
                                    hide-details
                                    label="Select value"
                                    single-line
                                    @change="changeInput(index, dropdownValues[index])"
                                    @click:append-outer="resetInput(index)"
                                    >
                                        <template slot="append-outer">
                                            <v-icon @click="resetInput(index)">
                                                mdi-close
                                            </v-icon>
                                        </template>
                                        <template
                                        slot="{item, index}">
                                            {{ index }}
                                        </template>
                                    </v-select>
                                </v-col>
                            </v-row>

I thought that I could do the items via this slot possibility but now I am unsure where and how to add the functionality of changing which items are deactive and which not.

Thanks in advance!

Answer 1

<v-select> items array with objects can have an additional property disabled that currently is not documented.

data: () => ({
    items: [
        { text: 'Empty', value: '' },
        { text: 'Test1', value: 'test1', disabled: true },
        { text: 'Test2', value: 'test2' },
        { text: 'Test3', value: 'test3' },
        { text: 'Test4', value: 'test4' },
    ]
}),

You can return the filtered array of objects as computed property you can see some demo example in here: https://codepen.io/edenkindil/pen/RwrZMXy

BTW you can change this property key like to the text and value with the item-disabled just like you would use the item-text or item-value

Update: Vuetify docs is now updated

You can see now all the available items in array of objects:

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