问题描述:在aspx页面中调用 Vue 组件进行打印,在不刷新页面的情况下,每次传递到Vue中的数据是正确的,但打印出的数据始终是第一次的数据;解决方法如下
代码由
window.vapp_commander = new Vue({
el: '#commander',
data() {
return {
list: []
}
},
template:
<br />
<br />``,
methods: {
print(list) {
this.list = list;
var com = this.$refs.commanderid;
`<br />
console.log(com);
<br />
com.print();
<br />
}
<br />
}
<br />
})
`
改写为:(function () {
`<br />
const app = new Vue({
<br />
data() {
<br />
return {
<br />
flag: false,
<br />
list: []
<br />
}
<br />
},
<br />
template: `<br />
<br />``,
methods: {
async print(list) {
this.flag = false;
this.list = list;
await this.$nextTick();
this.flag = true;
await this.$nextTick();
var com = this.$refs.commanderid;
com.print();
}
}
})
//创建div 存放组件,这样可以在页面中不声明这个组件
const dom = document.createElement('div');
document.body.appendChild(dom);
app.$mount(dom);
`<br />
window.vapp_commander = app;
<br />
})();`
调用处代码不用变:window.vapp_commander.print(rsp.rows);
完整代码如下:function vue_print() {
if (window.vapp_commander) {
const url = "/api/SvrOrder/GetOrderList_ServerPage";
`<br />
const filter = queryParams();
<br />
const total = $(“#tbRsv”).bootstrapTable(‘getOptions’).totalRows;
<br />
const pager = {
<br />
page_no: 1,
<br />
page_size: total,
<br />
sort_name: “ARRTIME”,
<br />
is_desc: “false”
<br />
}
<br />
$.post(url, { filter: JSON.stringify(filter), pager: JSON.stringify(pager) }, function (rsp) {
<br />//调用组件<br />
window.vapp_commander.print(rsp.rows);
<br />
})
<br />
<br />
}
<br />
}`