I'm working on creating a single computed property that can dynamically match two reactive variables. My tech stack includes Typescript, Vue3-Composition API, and PrimeVue.
Within Prime Vue, I have two similar MultiSelect components structured like this:
<MultiSelect
v-model="selectedClients"
:selected-items-label="itemsSelected"
:options="clientsList"
option-label="firstName"
option-value="id"
/>
<MultiSelect
v-model="selectedCars"
:selected-items-label="itemsSelected"
:options="carsList"
option-label="carType"
option-value="id"
/>
My goal is to bind the selected-items-label attribute to a computed property called itemsSelected, like so:
const itemsSelected = computed((selector) => {
return selector.value.length > 1 ? "{0} items selected" : "{0} item selected";
});
I am aware that I could use separate computed properties by toggling between selectedClients and selectedCars, but this feels redundant.
const accountsItemsSelected = computed(() => {
return selectedClients.value.length > 1
? "{0} items selected"
: "{0} item selected";
});
Is it possible to pass a dynamic parameter to a computed property in order to achieve this functionality with just one computed prop?