有没有办法反应性地禁用 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

您可以使用 computed prop 将原始选项映射到副本，其中每个选项的 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">

demo

有没有办法反应性地禁用 Primevue 的下拉选项？

Is there a way to disable Primevue's Dropdown options reactively?

vue.js

dropdown

reactive

disable

primevue