Question

我有以下功能提交表格：

methods: {
  submit_form: function () {
    this.drawing = dat.toImage();
    this.$refs.my_form.submit()
  }
}

drawing变量分配给my_form内的输入，如：

<input type="text" name="doodle" :value="drawing">

问题是表单是在使用this.drawing的值更新dat.toImage()之前发送的。实际上，如果我将前一个函数分成两个：

methods: {
  submit_form: function () {
    this.$refs.my_form.submit()
  },
  set_drawing: function () {
    this.drawing = dat.toImage()
  }
}

当我先运行set_drawing()然后submit_form()（带有两个不同的按钮）时，表单会正确发送并带有更新的绘图值。因此，由于某种原因，当两行都在同一个函数中时，表单将在前一行的执行结束之前发送。

对于为什么会发生这种情况以及如何解决它有任何想法？

更新：

这也不起作用，null值与表单一起发送。

data: {
  drawing: null
}
methods: {
  submit_form: function () {
    this.drawing = dat.toImage();
    while (this.drawing == null) {
      false
    }
    this.$refs.my_form.submit()
  }
}

似乎我初始化drawing的任何值都是与表单一起发送的值。事实上，我也在网站上显示drawing的价值，当我点击提交时，我看到它会发生变化，但上面的循环永远不会结束。

.toImage方法属于atrament.js库。

另外，为了捕捉提交事件，我做了：

<form method="POST" class="model-form" v-on:submit.prevent="submit_form()" ref="my_form">

Answer 1

似乎dat.toImage()是一个异步方法，所以Javascript开始执行下一个方法，而这还没有完成。如果这是您自己的方法，您可以从此函数返回一个promise，并在解析此promise时调用您的第二个方法。

Answer 2

尝试在this.$refs.my_form.submit()函数中添加setTimeout。一个棘手的小解决方法。

  submit_form: function () {
    this.drawing = dat.toImage();
    setTimeout(() => {
      this.$refs.my_form.submit()
    }, 3000)    
  }
}```

在前一个结束之前执行的vue.js函数中的行

2 个答案: