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