PrimeVue/PrimeFace: component's 'optionLabel' as a function?

user_483569 0
Viewed 501

Some of PrimeVue/PrimeFace's components have an optionLabel that adds a label to each option of a list/select. Such as in, e.g.:

<Listbox :options="cities" optionLabel="name" />

In this case name must be field of the objects in cities. But the documentation also states that this can be a function:

optionLabel: Property name or getter function to use as the label of an option.

But I can find no example of what this function should look like. I can make it a function, but that only gets called once for the complete listbox component, not for each option within it. Any suggestions?

primevue vue.js
1 Answers

Just like in Vue, you can reference a local function from methods or computed ot just use plain JavaScript

<template>
...
  <Listbox :options="cities" :optionLabel="name" />
<!-- OR --> 
  <Listbox :options="cities" :optionLabel="cities.name" />
...
</template>

<script>
export default {
  computed: {
    name() {
      return 'name';
    }
  }
}
</script>
user_33309810
Related