[英]Vuetify v-select + item-disabled how to use it?
at sample of https://vuetifyjs.com/en/components/selects/#multiple在 https 示例中://vuetifyjs.com/en/components/selects/#multiple
<v-select
v-model="value"
:items="items"
multiple
item-disabled=['foo','fizz'] //read only not work?
></v-select>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
value: ['foo', 'bar', 'fizz', 'buzz'],
}),
}
</script>
As mentioned in the Vuetify documentation , your items can be an array of objects with the following properties:如Vuetify 文档中所述,您的项目可以是具有以下属性的对象数组:
{
text: string | number | object,
value: string | number | object,
disabled: boolean,
divider: boolean,
header: string
}
Your example becomes:您的示例变为:
<template>
<v-select
v-model="value"
:items="items"
multiple
></v-select>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "foo",
value: "foo",
disabled: true,
},
{
text: "bar",
value: "bar",
},
{
text: "fizz",
value: "fizz",
disabled: true,
},
{
text: "buzz",
value: "buzz",
},
],
}),
};
</script>
As per the github issue raised here [Which is still open]: https://github.com/vuetifyjs/vuetify/issues/5557根据此处提出的 github 问题[仍然开放]: https://github.com/vuetifyjs/vuetify/issues/5557
If an array is passed it's used as a path to a property (['a', 'b'] is 'a.b'), not a list of item values.如果传递了一个数组,它将用作属性的路径(['a', 'b'] is 'a.b'),而不是项目值的列表。
So as per now, we cannot pass array directly to item-disabled to make some options disabled.因此,就目前而言,我们不能将数组直接传递给 item-disabled 以禁用某些选项。 As mentioned in above answer, Your current array needs to be converted to array of objects in order for item-disabled to work.如上面的答案所述,您当前的数组需要转换为对象数组才能使 item-disabled 工作。 We need to pass array of objects with disabled:true for the objects that needs to be disabled.我们需要为需要禁用的对象传递具有 disabled:true 的对象数组。
[
{text: 'Bar', value: 'Bar'},
{text: 'Gizz - Disabled', value: 'Gizz', disabled: true}
]
Here is the example - https://codepen.io/akshayd21/pen/qBqGONz这是示例 - https://codepen.io/akshayd21/pen/qBqGONz
Similar questions for reference: How can I disable literal values in Vuetify?类似问题供参考: 如何在 Vuetify 中禁用文字值? v-select deactivate some items/options v-select 停用某些项目/选项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.