Vue MultiSelect 的自定义标签不起作用？

Question

我有 2 个 MultiSelect 下拉列表 - 一个具有 'Single' 模式，一个具有 'Tags' 模式。我想在两者上显示一个自定义标签，其中包含选项中的两个属性，但这似乎不起作用 - 两个下拉列表仍然只显示 'normal' 标签（在这两种情况下，这只是名称选项）。

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

选项格式：

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'
  }]);

出了什么问题？

Answer 1

我在 here 中测试了您的代码，发现它可以正常工作。

可能是您使用的版本有问题。如果您使用的是 vue3，请安装 vue-multiselect@next.

Vue MultiSelect 的自定义标签不起作用？

Vue MultiSelect's Custom Label not working?

javascript

vue.js

vuejs3

multi-select

vue-multiselect