新增Post后立即编辑表单字段为空、v-model未更新问题求助

问题根因 #

该异常由两个常见问题共同导致：

• 异步请求顺序错误：拉取列表的getUsers()方法放在了axios请求外部，会在新增/编辑请求还未完成的情况下提前拉取旧数据，同时新增成功后未重置表单状态，导致vee-validate内部缓存的表单值和实际绑定的post对象不同步。
• vee-validate表单状态托管冲突：vee-validate 4的Form组件默认会托管表单的所有状态，直接修改post对象的属性不会触发Form内部的状态更新，所以编辑赋值后Field组件读取的还是旧的缓存值。

修复方案 #

1. 修正submitData异步逻辑 #

把后续操作都放到axios请求的then回调中，新增成功后主动重置表单和post对象，保证状态同步：

submitData() {
  if (this.isEditMode) {
    axios
      .put("http://localhost:3000/posts/" + this.id, this.post)
      .then(() => {
        this.isEditMode = false;
        this.buttonText = "Add";
        this.id = null;
        // 重置表单和post对象
        this.$refs.myForm.handleReset();
        this.post = { title: null, author: null };
        // 请求完成后再拉取列表
        this.getUsers();
    });
  } else {
    axios.post("http://localhost:3000/posts", this.post).then(() => {
      this.buttonText = "Add";
      // 重置表单和post对象
      this.$refs.myForm.handleReset();
      this.post = { title: null, author: null };
      // 请求完成后再拉取列表
      this.getUsers();
    });
  }
  // 删除原有写在该位置的getUsers()调用
},

2. 修正编辑赋值逻辑 #

编辑时直接替换整个post对象触发Vue响应式更新，同时调用Form的setValues方法同步vee-validate内部状态：

getEditUserDetails(id) {
  axios.get("http://localhost:3000/posts/" + id).then((result) => {
    this.id = result.data.id;
    // 直接替换整个post对象，触发Vue响应式更新
    this.post = {
      title: result.data.title,
      author: result.data.author
    };
    // 同步更新vee-validate表单状态
    this.$refs.myForm.setValues(this.post);
    this.isEditMode = true;
    this.buttonText = "Edit";
  });
},

修改完成后新增数据后立即点击编辑即可正常回填表单值。

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