如何创建值列表的文本区域编辑器？

Question

如何设法创建用于多值（数组）输入的文本编辑器？ 我的意思是我有像这样的模型对象：

  "names": [
    "name 1",
    "name 2",
    "name 3"
  ]

现在我希望能够将它附加到文本区域，意味着文本区域将逐行显示它...用户应该添加/删除行，结果将被设置为行数组以适合模型。通常，textarea 接受字符串作为输入。有没有办法在模型中使用某种 getter/setter，以便 getter 将使用新行字符连接数组项，而 setter 将按新行分割文本区域值以使其成为行数组？

对于这种问题你有什么解决办法吗？

编辑：需要解决方案https://primevue.org/textarea/

Answer 1

如果您将名称 arr 存储在像这样的 ref 中

const names = ref([
  "name 1",
  "name 2",
  "name 3"
])

然后您可以有一个文本区域字段，您可以在其中更改输入的数组

<textarea 
  :value="names.join('\n').toString()" 
  @input="(e) => names = e.target.value.split('\n')">
</textarea>

Answer 2

使用此代码，它将使用以下方式加入和拆分 :

<template>
    <textarea v-model="joinedItems"></textarea>
</template>

<script>
export default {
    data() {
        return {
            myArray: ["Item 1", "Item 2", "Item 3"]
        }
    },
    computed: {
        joinedItems: {
            get() {
                return this.myArray.join('\n');
            },
            set(newValue) {
                this.myArray = newValue.split('\n');
            }
        }
    }
}
</script>