SelectButton: disableOpiton - Where can I see examples or documentation?

[demiro]

Use case:

const sizeOptions = [10, 15, 20, 30];
const isSelected = ref(false);

<SelectButton id="fld-size" v-model="entityForm.size" :options="sizeOptions" optionDisabled="sizeDisabled" :allowEmpty="false" />

what I would like is when isSelected === false, all options are available and when isSelected === true, only option with value 30 is available.

the documentation is very vague about it:
optionDisabled (string | Function | null ) - Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.

in the example is used like this:

<SelectButton v-model="value" :options="options2" optionDisabled="constant" optionLabel="name" />

const options2 = ref([
    { name: 'Option 1', value: 1, constant: false },
    { name: 'Option 2', value: 2, constant: true }
]);

nothing about how to use more complex logic:

I have it something like:

const sizeDisabled = computed(() => {
  console.log('Computed property accessed');
  return (optionValue: any) => {
    console.log('something');
    return !!isSelected.value && optionValue !== 30;
  };
});

where the first console.log get's executed when the component is mounted, the second one - never... and needles to say the options are all always active :/

[BrutalSoloH]

Nothing gets computed cause sizeDisabled is not used or all depending props are in an anonymous function?
Perhaps better to compute the options2 array like this:

const options2 = computed(() => {
 const sizeOptions = [10, 15, 20, 30];
const ret = [];
 for (const v of sizeOptions) {
   ret.push({ name: '' + v, value: v, constant: isSelected.value && optionValue !== 30 })
 }
 return ret;
);