线在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()（具有两个不同的按钮），则形式被正确地与更新的绘图值发送。因此，出于某种原因，当两行都在同一个函数中时，表单将在前一行的执行结束之前发送。

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

UPDATE：

这也不管用，空值与形式发送。

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

看来，无论值I初始化drawing用，与形式发送的值。事实上，我也在网站上显示drawing的价值，当我点击提交时，我发现它会改变，但上面的循环永远不会结束。

.toImage方法属于atrament.js库。

而且，赶上提交事件我做的：

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

Answer 1

似乎dat.toImage()是一个异步方法，所以Java脚本开始执行下一个方法，而这还没有完成。如果这是你自己的方法，你可以从这个函数返回一个承诺，并根据这个承诺解决你的第二个方法。