Tengo 2 menús desplegables MultiSelect: uno con modo 'Único' y otro con modo 'Etiquetas'. Me gustaría mostrar una etiqueta personalizada en ambos, que contiene dos propiedades de las opciones, pero eso no parece funcionar: ambos menús desplegables solo muestran la etiqueta 'normal' (en ambos casos, ese es solo el nombre de la opción ).
<MultiSelect v-model="booking" :options="clients" :object="true" :searchable="true" :custom-label="({ name, tel }) => `${name} - [${tel}]`" valueProp="id" label="name" trackBy="name" placeholder="Pick client" /> <MultiSelect v-model="invoice" mode="tags" :object="true" :options="services" :searchable="true" :custom-label="({ name, price }) => `${name} - [${price}]`" valueProp="id" label="name" trackBy="name" placeholder="Add Services" />
Formato de las opciones:
const clients = ref([{ name: 'John Davis', tel: '88888888', address: 'London, UK' }, { name: 'David Smith', tel: '77777777', address: 'NY, USA' }]); const services = ref([{ name: 'Marketing', service: 'Do some marketing', price: '£150.00' }, { name: 'Sales', service: 'Do some sales', price: '£100.00' }]);
¿Qué ha ido mal?