How to run this.$refs.form.submit()
only when saveMapAsReceipt()
was finished?
HTML:
<form ref="form" ...>
<input @submit.prevent="onSubmit" @click="submit" type="button" name="save" value="Update" class="btn btn-primary btn btn-primary" id="submit-id-save" />
</form>
Vue.js
methods: {
saveMapAsReceipt() {
this.printPlugin.printMap('A4Portrait page', 'Miles');
self = this;
this.routingMap.on('easyPrint-finished', e => {
var reader = new window.FileReader();
reader.readAsDataURL(e.event);
reader.onloadend = function () {
base64data = reader.result;
self.receipt_source = base64data;
}
});
},
submit: function() {
this.saveMapAsReceipt();
this.$refs.form.submit();
},
}
Pass a Labda function to your saveMapAsReceipt
method ( closure
), and invoke the closure where you want the closure to execute just like this.
methods: {
SaveMapAsReceipt(closure){
this.printPlugin.printMap('A4Portrait page', 'Miles');
self = this;
this.routingMap.on('easyPrint-finished', e => {
var reader = new window.FileReader();
reader.readAsDataURL(e.event);
reader.onloadend = function () {
base64data = reader.result;
self.receipt_source = base64data;
}
closure();
});
},
submit: function() {
let that = this;
this.saveMapAsReceipt(function(){
that.$refs.form.submit();
});
},
}
This is a common problem with asynchronous flow control that promises are supposed to solve:
methods: {
async saveMapAsReceipt() {
this.printPlugin.printMap('A4Portrait page', 'Miles');
const e = await new Promise(resolve => this.routingMap.on('easyPrint-finished', resolve));
var reader = new window.FileReader();
reader.readAsDataURL(e.event);
await new Promise(resolve => reader.onloadend = resolve);
this.receipt_source = reader.result;
},
async submit() {
await this.saveMapAsReceipt();
this.$refs.form.submit();
},
}
self = this
is a mistake because self
refers to a global. The construct is redundant with ES6 arrows.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.