PrimeVue Chips组件通过v-model赋值时无法正确分隔求助

问题描述 #

使用PrimeVue的Chips组件，期望实现每个词汇单独成为一个标签的多标签效果。设置空格作为分隔符后，手动输入值时组件能完美分隔标签，但通过v-model编程赋值时，所有内容会被当成一个整体标签，无法正确拆分。使用的PrimeVue版本为3.44，组件代码如下：

<template lang="pug">
Chips(v-model="test" separator=" ")
</template>

<script setup>
import { ref } from 'vue';
const test = ref('es hu')
</script>

原因与解决办法 #

• 原因：PrimeVue的Chips组件仅在用户手动输入、触发分隔逻辑时，才会按设置的分隔符拆分字符串生成标签。直接给v-model赋值带空格的字符串，组件不会自动执行拆分操作。
• 解决办法：
  1. 直接用数组赋值：Chips组件的v-model支持数组类型，把值改成数组就能自动渲染为多个标签：

     const test = ref(['es', 'hu'])
     

  2. 手动拆分字符串为数组：如果只能拿到带空格的字符串，赋值前先按分隔符拆分：

     const inputStr = 'es hu';
     const test = ref(inputStr.split(' '))
     

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