Vue.js编辑表单弹窗修改值同步更新父页面内容如何解决？

问题原因 #

你修改模态框输入框内容时卡片同步更新，是因为你直接把卡片对应的原始产品数据赋值给了编辑表单绑定的productEdit变量，修改表单值等价于直接修改了卡片使用的原始数据，Vue的响应式机制检测到数据变更后会自动触发对应DOM的重新渲染，所以卡片标题会跟着实时变化。

解决方法 #

1. 切断编辑表单和原始数据的关联 #

修改editProduct方法，给productEdit赋值时拷贝一份新的对象，不要直接使用原始数据的引用：

editProduct(p) {
  this.edit = true;
  // 拷贝对象，修改表单不会影响原始卡片数据
  this.productEdit = {...p};
  // 如果产品对象有多层嵌套属性，可以用深拷贝方式：
  // this.productEdit = JSON.parse(JSON.stringify(p))
}

2. 调整productEdit初始值 #

把data里的productEdit初始值从空字符串改为空对象，避免绑定v-model时报错：

data() {
  return {
    // 其他配置不变
    productEdit: {},
  }
}

3. 提交编辑后手动更新卡片数据 #

你当前代码缺少编辑提交对应的save方法，补充该方法并在接口请求成功后，手动把修改后的数据更新到原始产品列表里，实现点击保存才更新卡片的效果：

async save() {
  const formData = new FormData();
  if(this.file) formData.append('file', this.file);
  formData.append('title', this.productEdit.title);
  formData.append('id', this.productEdit.id);
  try {
    const res = await axios.post('/api/updateproduct', formData);
    if(res.data.status === 'ok') {
      // 找到对应产品更新数据
      const targetIndex = this.products.findIndex(item => item.id === this.productEdit.id);
      if(targetIndex !== -1) {
        this.products[targetIndex] = {...this.productEdit};
      }
      this.hideModal();
    }
  } catch(err) {
    console.log(err);
  }
}

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