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

【问题标题】：line in vue.js function executed before the previous ended在前一个结束之前执行的 vue.js 函数中的行
【发布时间】：2017-05-10 03:48:15
【问题描述】：

我有以下提交表单的功能：

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">

【问题讨论】：

标签： javascript vue-component vue.js vuejs2

【解决方案1】：

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

【讨论】：

感谢您的回复。我做了更多的实验来检查这是否可能是问题的根源，但似乎并非如此。我已使用此信息更新了问题。
@user1294122 我没有看到你在编辑后的版本中使用了 Promise，你可以看一个例子 here 如何使用它。
@user1294122 在更新中，你犯了完全相同的错误I made once，认为javascript会在异步作业完成的那一刻执行回调代码，但实际上, js 每次到达函数末尾时都会检查是否有一些回调要执行，因此我们俩都滥用的 while 循环不会按照我们想要的方式工作。

【解决方案2】：

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

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

【讨论】：