v-select 停用某些项目/选项答案

【问题标题】：v-select deactivate some items/optionsv-select 停用某些项目/选项
【发布时间】：2020-06-26 10:36:53
【问题描述】：

我正在使用 vuetify 来显示下拉菜单。选项来自我的组件数据。我现在想做的是只停用 v-select 中的一些项目。哪些项目被停用以及哪些项目被激活将取决于用户输入。我只能通过将disabled="true" 添加到 v-select 来找到停用整个 v-select 的选项。

我的代码现在看起来像这样：

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

我认为我可以通过这个插槽的可能性来做这些项目，但现在我不确定在哪里以及如何添加更改哪些项目是非活动的和哪些不是的功能。

提前致谢！

【问题讨论】：

标签： filter vuetify.js dropdown v-select

【解决方案1】：

<v-select> items 带有对象的数组可以有一个额外的属性disabled，目前没有记录。

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

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

更新：Vuetify 文档现已更新

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

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

【讨论】：