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

Question

with a template...

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

and data:

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

The disabled state is only set when the dropdown is created and is not reactive to any further changes to the disabled attribute in data. Is this by design or is there a way to make this reactive?

Answer 1

You could use a computed prop that maps the original options to a copy, where each option's disabled flag (if it exists) is equal to the value of this.disabled:

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

Then in your template, replace opts with computedOpts:

<Dropdown :options="computedOpts">

demo