v-select禁用某些项目/选项 [英] v-select deactivate some items/options

问题描述

我正在使用vuetify来显示下拉列表.这些选项来自我的组件数据.我现在想做的是仅停用v-select中的某些项目.哪些项目被停用，哪些被激活，将取决于用户输入.我只能找到停用整个v-select的选项，就像在v-select中添加 disabled ="true" 一样.

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.

提前谢谢！

推荐答案

< v-select> items 带有对象的数组可以具有附加属性 disabled当前未记录.

<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' },
    ]
}),

您可以将过滤后的对象数组作为计算属性返回，您可以在此处看到一些演示示例: https://codepen.io/edenkindil/pen/RwrZMXy

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

顺便说一句，您可以使用 item-disabled 将此属性键更改为文本和值，就像使用 item-text 或 item-值

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

您现在可以看到对象数组中的所有可用项目:

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
}

这篇关于v-select禁用某些项目/选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！