Primvue MultiSelect绑定v-model时显示null的问题排查

组件代码 #

<MultiSelect id="Color-input"
  v-model="DesignData.ColorQty"
  options="DesignColors"
  optionLabel="colorName"
  label="Color" />

数据定义 #

data() {
  return {
    DesignData: [ColorQty[]],
    DesignColors: [
      {
        colorName: "Red",
        sizes: { A: 0, B: 0, C: 0, D: 0, E: 0 },
        hexCode: "#FF0000",
      },
      {
        colorName: "Blue",
        sizes: { A: 0, B: 0, C: 0, D: 0, E: 0 },
        hexCode: "#0000FF",
      },
      {
        colorName: "Green",
        sizes: { A: 0, B: 0, C: 0, D: 0, E: 0 },
        hexCode: "#00FF00",
      },
      {
        colorName: "Black",
        sizes: { A: 0, B: 0, C: 0, D: 0, E: 0 },
        hexCode: "#000000",
      },
    ],
  };
}

赋值代码 #

this.DesignData.ColorQty = [
  {
    "colorName": "Black",
    "sizes": { "A": 3, "B": 4, "C": 5, "D": 5, "E": 5 },
    "hexCode": "#000000",
  }
];

问题现象 #

已正确导入并注册MultiSelect组件，但赋值后组件选项显示null而非“Black”；仅当sizes所有值设为0时能正常显示。

核心原因及解决方向 #

1. options绑定错误：options="DesignColors"是字符串字面量绑定，组件无法识别为数据中的数组，必须改为:options="DesignColors"（v-bind语法），才能正确读取选项列表。

2. DesignData结构错误：DesignData: [ColorQty[]]是无效语法，后续用this.DesignData.ColorQty访问说明它应该是对象，正确写法是DesignData: { ColorQty: [] }，否则会导致数据访问异常。

3. 选中项匹配逻辑：PrimVue MultiSelect默认通过对象引用相等匹配选中项与选项。你赋值的Black对象是全新实例，和DesignColors里的Black对象引用不同；当sizes全为0时，可能因属性完全一致触发了组件内部的浅比较匹配，而sizes值改变后，属性差异导致匹配失败，最终显示null。

解决建议：

• 修正上述绑定和数据结构错误
• 给MultiSelect添加optionValue="hexCode"（或其他唯一标识字段），让组件通过唯一值匹配选中项，彻底摆脱对象引用的限制。

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