Vue3响应式表单通过mitt触发提交时携带旧输入值问题求解

这个问题的核心是Vue的DOM更新是异步批量执行的，你修改formData后立刻触发表单提交，提交动作执行时DOM还没完成更新，所以提交的还是旧值。

• 你在事件回调里同步执行了两个操作：1. 修改formData.parameters[0].value 2. 把submit设为true
• Vue为了优化性能，会把同一个事件循环内的所有数据变更合并，推迟到下一个微任务阶段再统一更新DOM
• submit的watch回调是同步触发的，执行form.submit()时，表单里content对应的hidden input的value还没被更新到DOM上，所以请求携带的是初始旧值
• 你在控制台手动执行submit时，已经过了当前事件循环，DOM更新完成，所以提交的是新值；控制台打印的DOM元素是引用类型，你展开查看时已经完成了DOM更新，所以会显示新的value属性，造成DOM已经更新的错觉。

两种方案任选其一即可：

方案1：CustomContent中修改值后，等待DOM更新完成再修改submit状态 #

修改CustomContent.vue的事件回调代码：

this.eventBus.on('toolbarAction', action => {
  if (this.formData) {
    this.formData.parameters[0].value = this.newContent;
    // 等待DOM更新完成后再触发提交标识
    this.$nextTick(() => {
      this.submit = true;
    })
  }
});

方案2：CustomForm中监听submit变化后，等待DOM更新完成再提交表单 #

修改CustomForm.vue的submit监听代码：

watch: {
  submit: function (value) {
    if (value === true) {
      // 等待DOM更新完成后再提交表单
      this.$nextTick(() => {
        this.$refs.form.submit();
      })
    }
  }
}

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