时间戳

首页 > 解决方案 > Vue MultiSelect 的自定义标签不起作用？

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

问题描述

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

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

出了什么问题？

标签： javascriptvue.jsvuejs3multi-selectvue-multiselect

解决方案

我在这里测试了您的代码，发现这是有效的。

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

推荐阅读