[SOLVED] Need to put more than one field from an object inside a Primevue Select choice

Need to put more than one field from an object inside a Primevue Select choice

I have a Primevue Select element that referts to an array:

{ "name": "a name", "description": "a descriptnin", "module": "a module name" }

The below Select will list the name, but I want to list the name and next to it, the module.
I have tried using a , but this is not just an array of names.

How can I put multiple text fields in the select?

<Select id="OutVar" class="varInputs" v-model="selectedOutputVariable"
  :disabled="!isFormulationDataSet()" :options="outputVariables" optionLabel="name"
  optionValue="name">
</Select>

Solution

PrimeVue allows customization of different parts of components by utilizing the concept of slots in Vue. The PrimeVue Select API tells us that a Select's option content can be specifically customized using the "option" slot, with "scope" slot variable provided.

This means between the Select tags a <template v-slot:option="scope"> can be used for customization, or using shorthand syntax, <template #option="scope">.

With the provided scope variable containing the option data (as seen in the documentation), you can access both name and module texts to display them together:

<Select v-model="selectedCity" :options="cities" class="w-full md:w-56">
  <template #option="scope">
    {{ scope.option.name }} {{ scope.option.module }}
  </template>
</Select>