線在vue.js功能之前先前執行結束

我有以下功能提交表單：線在vue.js功能之前先前執行結束

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

來源

2016-12-25 user1294122

似乎dat.toImage()是一個異步方法，所以Java腳本開始執行下一個方法，而這還沒有完成。如果這是你自己的方法，你可以從這個函數返回一個承諾，並根據這個承諾解決你的第二個方法。

來源

2016-12-25 03:11:48 Saurabh

感謝您的回覆。我做了一些更多的實驗來檢查這是否可能是問題的根源，但似乎並非如此。我已經用這個信息更新了這個問題。 – user1294122

@ user1294122我沒有看到你在編輯的版本中使用promises，你可以看到一個例子[這裏]（https://spring.io/understanding/javascript-promises）關於如何使用它。 – Saurabh

@ user1294122在更新中，你犯了完全相同的錯誤[我曾經犯過一次]（思考JavaScript的問題）（http://stackoverflow.com/questions/31210242/whilecount-3-fail-to-check-callback-state）會執行異步作業滿足時的回調代碼，但事實上，js會在每次到達函數結束時檢查是否執行某個回調，因此，由我們兩人濫用的while循環都不起作用我們想要的方式。 –

線在vue.js功能之前先前執行結束

回答

相關問題