如何在v-combobox中添加相同值的多个Chips

核心原因 #

v-combobox的multiple模式默认会基于值的唯一性管理选中项，添加相同原始值时，组件会判定为重复项自动移除。因此纯数值数组（如[100,200,200]）无法实现需求，必须改用带唯一标识的对象数组来区分每个项。

具体修改步骤 #

1. 调整v-model绑定的数据结构 #

将compartments_detail从纯数值数组改为对象数组，每个对象包含唯一ID和实际值：

// 初始化示例
compartments_detail: [
  { id: 1, value: 100 },
  { id: 2, value: 200 },
  { id: 3, value: 200 }
]

2. 修改v-combobox组件配置 #

新增return-object属性确保选中时返回完整对象，用item-text指定显示字段：

<v-combobox
  v-if="points.number_compartments > 1"
  v-model="compartments_detail"
  chips
  label="CAPACIDAD DE COMPARTIMIENTOS"
  clearable
  deletable-chips
  append-icon=""
  multiple
  outlined
  dense
  class="mx-3"
  return-object  <!-- 强制返回完整对象 -->
  item-text="value"  <!-- 指定显示value字段 -->
>

3. 更新selection插槽内容 #

将插槽中的item改为item.value，确保显示正确数值：

<template v-slot:selection="{ attrs, item, selected, index }">
  <v-chip
    small
    v-bind="attrs"
    :input-value="selected"
    close
    @click:close="removeChips(index)"
    color="primary"
  >
    <span>{{index + 1}} </span>  - {{ item.value }} <span class="mx-1"> (gls) </span>
  </v-chip>
</template>

4. 处理用户输入的新值 #

监听change事件，将用户输入的纯数值转为带唯一ID的对象：

<v-combobox
  <!-- 其他属性不变 -->
  @change="handleAddItem"
>

对应方法：

handleAddItem(newItems) {
  const lastItem = newItems[newItems.length - 1];
  // 判断最后一项是否是用户输入的纯数值（非预设选项）
  if (lastItem && typeof lastItem !== 'object') {
    newItems.pop();
    newItems.push({
      id: Date.now(), // 用时间戳生成唯一ID，也可用自增序列
      value: lastItem
    });
    this.compartments_detail = [...newItems];
  }
}

5. 调整删除逻辑 #

确保removeChips方法针对对象数组操作：

removeChips(index) {
  this.compartments_detail.splice(index, 1);
}

最终效果 #

组件可正常添加多个相同值的Chips，compartments_detail存储结构为：

[
  { id: 1, value: 100 },
  { id: 2, value: 200 },
  { id: 3, value: 200 },
  { id: 4, value: 300 }
]

若需后端所需的纯数值数组，可通过compartments_detail.map(item => item.value)转换为[100,200,200,300]。

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