Dropdown 'null / empty' value

[ricombnation]

I'm looking for a possibility to have a null / empty / all option for a dropdown. I thought something like this for the options would work:

Code: Select all

[
 {"id":null,"name":"All Categories"},
 {"id":1,"name":"Category 1"},
 {"id":2,"name":"Category 2"},
 {"id":3,"name":"Category 3"}
]

Unfortunately it doesn't - the name for the null value is never displayed. I stumbled upon this https://github.com/primefaces/primevue/issues/736 which is kind of an explanation but not really a solution.

I could fall back to a select, but then the styling is not consistent and the filter function with the clear button also makes the ux inconsistent in this case.

Any other ideas?

[ricombnation]

I figured out a workaround - set the placeholder and add an option with a null value and the same name as the placeholder. E.g.

Code: Select all

<Dropdown
  placeholder="All Categories"
  :options="[{id: null, name: 'All Categories'}, ...categories]"
  option-label="name"
  option-value="id" />

... and the options:

Code: Select all

categories = [
 {"id":1,"name":"Category 1"},
 {"id":2,"name":"Category 2"},
 {"id":3,"name":"Category 3"}
]