有没有办法被动地禁用Primevue的下拉选项？

Question

使用模板。。。

<Dropdown
:options="opts"
optionLabel="name"
optionValue="value"
optionDisabled="disabled"

和数据：

disabled: true
opts: [
{ name: "Dog", value: "dog"},
{ name: "Cat", value: "cat"},
{ name: "Monkey", value: "monkey", disabled: this.disabled }]

禁用状态仅在创建下拉列表时设置，并且不会对数据中禁用属性的任何进一步更改作出反应。这是故意的，还是有办法让它变得被动？

Answer 1

您可以使用一个计算道具，将原始选项映射到副本，其中每个选项的disabled标志(如果存在(等于this.disabled:的值

export default {
computed: {
computedOpts() {
return this.opts.map(opt => ({
...opt,
disabled: typeof opt.disabled !== 'undefined' ? this.disabled : undefined
}))
}
},
}

然后在模板中，将opts替换为computedOpts:

<Dropdown :options="computedOpts">

演示