Vue MultiSelect组件custom-label自定义标签不生效问题求助

核心错误点 #

• 你同时配置了label="name"和custom-label属性：你使用的MultiSelect组件中，label属性的优先级高于自定义标签渲染规则，所以组件会优先读取label指定的name字段渲染，完全忽略custom-label的配置。
• 额外问题：你配置了valueProp="id"，但你的clients和services数组中的对象都没有id字段，后续绑定值的时候可能会出现取值异常。

修复方案 #

1. 移除两个MultiSelect组件的label="name"属性 #

修改后的组件代码如下：

<MultiSelect 
  v-model="booking" 
  :options="clients" 
  :object="true" 
  :searchable="true" 
  :custom-label="({ name, tel }) => `${name} - [${tel}]`" 
  valueProp="id" 
  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" 
  trackBy="name" 
  placeholder="Add Services" 
/>

2. 补充选项的id字段（可选，建议修复） #

给每个选项对象新增唯一的id属性，避免valueProp配置失效：

const clients = ref([{ 
    id: 1,
    name: 'John Davis',
    tel: '88888888', 
    address: 'London, UK'
  }, { 
    id: 2,
    name: 'David Smith', 
    tel: '77777777', 
    address: 'NY, USA'
  }]);

const services = ref([{ 
    id: 1,
    name: 'Marketing',
    service: 'Do some marketing', 
    price: '£150.00'
  }, { 
    id: 2,
    name: 'Sales', 
    service: 'Do some sales', 
    price: '£100.00'
  }]);

如果不需要用id作为值的唯一标识，也可以直接把valueProp修改为现有字段，比如valueProp="name"。

内容的提问来源于stack exchange，提问作者user13254694