时间戳

首页 > 解决方案 > v-select 停用某些项目/选项

filter - v-select 停用某些项目/选项

问题描述

我正在使用 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>

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

提前致谢！

标签： filtervuetify.jsdropdownv-select

解决方案

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

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-textor一样将此属性键更改为文本和值item-value

更新：Vuetify 文档现已更新

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

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

推荐阅读