Vue.js循环输入框v-model异常：修改一个输入同步更新所有元素

核心问题分析 #

你遇到的多语言输入框同步变化问题，本质是不同语言的表单字段共享了同一个对象引用，或者Vue响应式跟踪出现异常，导致修改一个字段会同步到其他同类型字段。

排查与解决步骤 #

1. 检查数据源的引用一致性 #

首先确认接口返回的res或state.pages.one中，language下的不同语言对象是否为同一个引用。在获取数据后添加打印验证：

console.log(form.value.language.en === form.value.language.es);

如果输出true，说明两个语言对象共享引用。此时需要强制为每个语言对象创建独立副本：

await dispatch('pages/getOne', route.value.params.id).then((res) => {
  if (res !== false) {
    const clonedRes = lodash.cloneDeep(res);
    // 为每个语言对象创建新的独立对象，彻底隔离引用
    Object.keys(clonedRes.language).forEach(lang => {
      clonedRes.language[lang] = {...clonedRes.language[lang]};
    });
    form.value = clonedRes;
  }
})

2. 优化v-for的绑定方式 #

将v-model直接绑定到循环的language变量上，避免通过索引访问可能引发的响应式跟踪问题：

<div v-for="(language, langCode) in form.language" :key="langCode">
  <v-text-field
      v-model="language.title"
      :label="$t('form.title')"
  />
  <v-textarea
      v-model="language.content"
      :label="$t('form.content')"
  />
</div>

3. 验证深克隆的有效性 #

如果lodash的cloneDeep没有彻底隔离引用，可以尝试用JSON序列化的方式临时验证：

form.value = JSON.parse(JSON.stringify(res));

如果问题解决，说明原数据存在cloneDeep无法处理的特殊引用，需要排查后端返回的数据结构是否存在对象复用的情况。

4. 确保form的初始化正确 #

避免直接用state.pages.one初始化form，改为先创建空结构再赋值：

const form = ref({
  title: null,
  content: null,
  language: {}
});

这样可以避免初始状态的引用问题影响后续的数据更新。

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