Vue3中v-model绑定computed值无法反向更新问题求解

问题根因 #

1. 默认的computed属性是只读的计算值，你当前的formated每次都会基于data里的原始textarea值（比如defaultentry、fr.value等）重新生成全新的数组，你直接修改formated.default[index]这类值，不会写入到原始的textarea数据源中，下次computed重新计算就会覆盖你修改的内容，自然没法双向同步。
2. 你直接用v-model绑定computed返回的数组元素，相当于修改的是临时生成的对象，没有触发原始数据源的更新，所以看起来只有单向同步的效果。

最优解决方案 #

思路是：单行输入框修改时，直接同步修改对应语言的原始textarea值的对应行，computed会自动根据修改后的原始值重新计算，实现双向同步。
具体修改如下：

1. 模板部分修改 #

把单行input的v-model换成:value绑定+@input事件处理，所有语言的输入框都按照这个规则替换即可，示例如下：

<tbody>
  <!-- 原有textarea行代码保持不变 -->
  <tr v-for="(entry, index) in formated.default" :key="index">
    <td v-if="formated.default[index]">{{ index }}</td>
    <td v-if="formated.default[index]">
      <input 
        type="text" 
        :value="formated.default[index]" 
        @input="updateRow('default', index, $event.target.value)"
      />
    </td>
    <td v-if="formated.fr">
      <input 
        type="text" 
        :value="formated.fr[index]" 
        @input="updateRow('fr', index, $event.target.value)"
      />
    </td>
    <!-- en、it、es、german的输入框都按照上面的写法替换即可 -->
  </tr>
</tbody>

2. script部分添加更新方法 #

在组件中新增methods配置即可，原有data、computed代码无需改动：

export default {
  name: "Array",
  data() {
    // 原有data代码保持不变，建议把defaultentry和各语言value的初始值改成空字符串，更符合textarea的绑定类型
  },
  computed: {
    // 原有formated计算属性代码保持不变
  },
  methods: {
    updateRow(lang, index, newValue) {
      // 读取对应语言的原始textarea内容，按行拆分
      const originContent = lang === 'default' 
        ? String(this.defaultentry)
        : String(this[lang].value)
      const rowList = originContent.split('\n')
      // 更新对应行的内容
      rowList[index] = newValue
      // 写回原始数据源，触发computed自动重新计算
      if (lang === 'default') {
        this.defaultentry = rowList.join('\n')
      } else {
        this[lang].value = rowList.join('\n')
      }
    }
  }
}

关于你提到的reactive API：你当前使用的是选项式API，data中返回的对象本身就已经是响应式的，不需要额外引入reactive。如果之后切换为组合式API开发，才需要用reactive/ref来声明响应式数据，当前场景不需要额外调整。

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