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

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()

（使用两个不同的按钮）时，表单将正确发送，并包含更新的绘图值。因此，由于某种原因，当两行都在同一个函数中时，表单会在前一行的执行结束之前发送。

知道为什么会发生这种情况以及如何解决吗？

更新：

这也不起作用，空值随表单一起发送。

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在这还没有完成时就开始执行下一个方法。如果这是您自己的方法，您可以从此函数返回一个承诺，并在解决该承诺时调用您的第二个方法。

Answer 2

尝试在

this.$refs.my_form.submit()

函数中添加

setTimeout

。一个小棘手的解决方法。

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