Question

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

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

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

我以为我可以通过这种插槽方式来处理这些项目，但是现在我不确定在何处以及如何添加更改哪些项目无效和哪些无效的功能。

谢谢！

Answer 1

包含对象的

<v-select> 项目数组可以具有当前未记录的附加属性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
}

v-select禁用某些项目/选项

1 个答案:

更新：Vuetify文档现已更新