求助：v-model绑定含其他变量的计算属性的textarea编辑报错及换行问题

嘿，我来帮你搞定这两个问题！先从核心的编辑错误说起，再解决换行的需求~

一、编辑时出错的原因及解决方案 #

你遇到的编辑错误，本质是v-model需要绑定一个可写的属性，但计算属性默认只有getter（读取逻辑），没有setter（修改逻辑），当你在textarea输入时，v-model尝试修改计算属性，就会抛出错误。再加上你要求不修改源变量，最优方案是用本地副本变量绑定v-model，完全隔离源数据和编辑操作。

推荐方案：用本地副本存储编辑内容 #

这个方法简单直观，彻底避免修改源数据：

<template>
  <div>
    <textarea v-model="editableContent" rows="8"></textarea>
    <!-- 示例：动态添加true-false的按钮 -->
    <button @click="addTrueFalse">添加true-false</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 源数据：保持只读，不会被修改
      sourceText: '',
      // 本地副本：用于绑定v-model，所有编辑操作都针对这个变量
      editableContent: ''
    };
  },
  // 假设var1、var2是外部传入的props或其他变量
  props: ['var1', 'var2'],
  mounted() {
    // 初始化时把带var1/var2的文本同步到本地副本
    this.initEditableContent();
  },
  watch: {
    // 如果var1/var2动态变化，自动更新编辑框内容（可选，按需开启）
    var1() {
      this.initEditableContent();
    },
    var2() {
      this.initEditableContent();
    }
  },
  methods: {
    initEditableContent() {
      // 拼接带换行的初始文本
      this.sourceText = `初始文本内容
var1: ${this.var1}
var2: ${this.var2}`;
      // 同步到可编辑副本
      this.editableContent = this.sourceText;
    },
    addTrueFalse() {
      // 动态添加内容到编辑框末尾
      this.editableContent += '\ntrue-false';
    }
  }
};
</script>

如果一定要用计算属性绑定，必须给计算属性添加setter，但本质还是要借助本地变量存储编辑值，代码会更繁琐，上面的副本方案是更优选择~

二、让var1和var2显示为单独的行 #

textarea会识别纯文本的换行符\n，所以在拼接初始文本时，直接用\n分隔var1和var2即可：

• 用ES6模板字符串的话，可以直接换行写（模板字符串会保留换行格式），就像上面代码里的写法；
• 也可以手动拼接\n：this.sourceText = "初始内容\nvar1: " + this.var1 + "\nvar2: " + this.var2;

这样渲染到textarea里，var1和var2就会各占一行啦~

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