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>
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>