仅在this.$refs.form.submit()
完成后如何运行saveMapAsReceipt()
?
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();
},
}
答案 0 :(得分:2)
将Labda函数传递给您的saveMapAsReceipt
方法(closure
),并在要让闭包像这样执行的地方调用闭包。
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();
});
},
}
答案 1 :(得分:2)
这是异步流控制中的一个常见问题,承诺应解决:
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
是一个错误,因为self
是指全局变量。该结构带有ES6箭头是多余的。