PrimeVue TreeSelect组件值绑定异常问题求助

你遇到的问题是TreeSelect在单选模式下却输出了多选格式的绑定值，这大概率是组件配置或初始值设置的问题，按以下步骤解决：

1. 确保初始值类型正确 #

不要把testValue初始化为空对象{}，单选模式下初始值应该设为null或空字符串：

// Vue 3 Composition API示例
import { ref } from 'vue';
const testValue = ref(null);

2. 显式配置绑定规则 #

根据你的需求选择以下配置：

绑定选中项的value字段值 #

显式指定optionValue（虽然默认就是value，但显式设置可以避免潜在的字段识别问题）：

<TreeSelect 
  v-model="testValue" 
  selectionMode="single" 
  :options="testCategories" 
  placeholder="Select value"
  optionValue="value"
/>

此时testValue会被赋值为选中项的value属性值，比如'subcategory1.1'。

绑定整个选中项对象 #

设置emitValue="false"，这样v-model会直接绑定选中的完整对象：

<TreeSelect 
  v-model="testValue" 
  selectionMode="single" 
  :options="testCategories" 
  placeholder="Select value"
  :emitValue="false"
/>

此时testValue会被赋值为选中的节点对象，比如{id:2, label:'Subcategory 1.1', value:'subcategory1.1'}。

3. 排查版本问题 #

如果上述配置无效，可能是PrimeVue 3.25.0的版本bug，尝试升级到3.25.0之后的稳定版本（比如3.29.x），很多旧版本的组件绑定问题在后续更新中已经修复。

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