问题描述:在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 /> }`
