PrimeVue MultiSelect仅传值提交及编辑回显问题咨询

要实现仅提交选中项的value值，同时支持编辑场景回显，借助PrimeVue MultiSelect的optionValue属性调整配置即可，具体操作如下：

1. 修改组件配置，绑定value值 #

在MultiSelect组件中添加optionValue属性，指定选项对象中作为值的字段（这里是value），此时组件的v-model会自动绑定选中项的value值，而非整个选项对象：

<script setup>
import MultiSelect from 'primevue/multiselect';
import { reactive } from 'vue';

const conditions =  [
    { name: "Hyper Tension", value: "Hyper Tension" }
];

const form = reactive({
     // 多选场景初始值设为空数组，避免组件初始化异常
     conditions: [],
});
</script>
<template>
  <MultiSelect 
    v-model="form.conditions" 
    :options="conditions" 
    optionLabel="name" 
    optionValue="value" 
    placeholder="Select" 
  />
</template>

2. 编辑场景回显处理 #

从接口获取编辑数据后，直接将返回的conditions值（即value数组）赋值给form.conditions，组件会自动匹配选项完成回显：

// 示例：从接口获取的编辑数据
const editData = {
  conditions: ["Hyper Tension"]
};

// 直接赋值实现回显
form.conditions = editData.conditions;

3. 提交表单处理 #

此时form.conditions已经是选中项的value数组，直接提交即可，请求体格式会变为：

"conditions": ["Hyper Tension"]

关键说明 #

• optionValue：指定选项对象中用于绑定v-model的字段，设置后v-model的值会是该字段的集合，而非整个选项对象。
• 多选场景下，v-model初始值建议设为空数组[]，而非null，避免组件初始化出现异常。

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