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

【问题标题】：Vue MultiSelect's Custom Label not working?Vue MultiSelect 的自定义标签不起作用？
【发布时间】：2021-09-16 18:47:43
【问题描述】：

我有 2 个多选下拉菜单 - 一个具有“单选”模式，一个具有“标签”模式。我想在两者上显示一个自定义标签，其中包含选项中的两个属性，但这似乎不起作用 - 两个下拉列表仍然只显示“正常”标签（在这两种情况下，这只是选项的名称)。

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

出了什么问题？

【问题讨论】：

标签： javascript vue.js vuejs3 multi-select vue-multiselect

【解决方案1】：

我在here 中测试了您的代码，发现这是可行的。

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

【讨论】：

原来确实是版本问题。现在一切正常:)