如何为PrimeVue Textarea实现数组多值输入编辑器？

完全可以通过计算属性的getter/setter实现需求，核心逻辑就是在数据流向Textarea时把数组转成换行分隔的字符串，反之则把字符串拆回数组，同时处理空行等边界情况。

Vue 3 组合式API实现 #

<template>
  <Textarea v-model="namesText" rows="5" placeholder="每行输入一个名称" />
</template>

<script setup>
import { ref, computed } from 'vue';
import Textarea from 'primevue/textarea';

// 你的原始数组模型
const names = ref(["name 1", "name 2", "name 3"]);

// 绑定Textarea的计算属性，实现双向转换
const namesText = computed({
  get() {
    // 数组转字符串：每个元素占一行
    return names.value.join('\n');
  },
  set(inputValue) {
    // 字符串转数组：按换行拆分，清理空白行和首尾空格
    names.value = inputValue
      .split(/\r?\n/) // 兼容Windows(\r\n)和Unix(\n)换行符
      .map(item => item.trim())
      .filter(item => item); // 过滤空行
  }
});
</script>

Vue 2/3 选项式API实现 #

<template>
  <Textarea v-model="namesText" rows="5" placeholder="每行输入一个名称" />
</template>

<script>
import Textarea from 'primevue/textarea';

export default {
  components: { Textarea },
  data() {
    return {
      names: ["name 1", "name 2", "name 3"]
    };
  },
  computed: {
    namesText: {
      get() {
        return this.names.join('\n');
      },
      set(inputValue) {
        this.names = inputValue
          .split(/\r?\n/)
          .map(item => item.trim())
          .filter(item => item);
      }
    }
  }
};
</script>

关键细节说明 #

• 换行兼容：用/\r?\n/拆分可以同时处理Windows和类Unix系统的换行符，避免跨平台出现异常
• 空行处理：filter(item => item)会自动过滤掉用户输入的空行（包括全是空格的行），保证数组里没有无效空元素
• 实时同步：计算属性的双向绑定会自动同步names数组和Textarea内容，用户增删行后数组会实时更新

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