Vue Axios 推送数组未实时更新

Question

我在使用 jspdf autotable 生成 table pdf 时遇到问题我正在使用 axios 获取动态列表，问题是当我单击按钮预览时没有结果

点击一次预览按钮 enter image description here

但是当我再次点击预览时出现了结果

再次点击预览按钮 enter image description here

这是我的代码

HTML

<template>
    <div id="report" class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card card-body">
                    <div class="form-group">
                        <v-flex xs12>
                        <v-radio-group v-model="document_category" row>
                        <v-radio label="Draft" value="DRAFT"></v-radio>
                        <v-radio label="Original" value="ORIGINAL"></v-radio>
                        </v-radio-group>
                        </v-flex>
                        <v-flex xs12>
                            <v-text-field v-model="profile_id" prepend-icon="text_fields" placeholder="Enter Title" label="Title" @keyup.enter="Report('preview')"></v-text-field>
                        </v-flex>
                        <v-flex xs12>
                        <v-text-field v-model="profile_name" prepend-icon="sort" placeholder="Enter Content" label="Content" @keyup.enter="Report('preview')"></v-text-field>
                        </v-flex>
                    </div>
                    <v-btn color="success" flat @click="Report('preview')">Preview</v-btn>
                    <v-btn color="error" flat @click="Report('newwindow')">Preview On New Window</v-btn>
                    <v-btn color="primary" flat @click="Report('print')">Preview and Print</v-btn><br><br>
                    <app-dialogloading :visible="dialog_loading" />
                    <iframe width="100%" height="500px" :src="urlpdf" v-if="urlpdf"></iframe>
                </div>
            </div>
        </div>
        <v-dialog v-model="dialog_preview_print" fullscreen hide-overlay transition="dialog-bottom-transition">
        <v-card>
            <v-toolbar flat dark color="primary">
                <v-btn icon dark @click.stop="dialog_preview_print = false">
                <v-icon>arrow_back</v-icon>
                </v-btn>
                <v-toolbar-title>Preview</v-toolbar-title>
                <v-spacer></v-spacer>
            </v-toolbar>
                <iframe width="100%" height="600px" :src="urlpdf" v-if="urlpdf"></iframe>
        </v-card>
        </v-dialog>
    </div>
</template>

JS

import jsPDF from 'jspdf'
require('jspdf-autotable')
export default {
    name: 'PN001',
    props: {
        referenceno: String
    },
    data: () => ({
        document_category: 'DRAFT',
        profile_id: '',
        profile_name: '',
        urlpdf: '',
        dialog_loading: false,
        dialog_preview_print: false,
        rows: []
    }),
    created() {
        this.profile_id = this.$props.referenceno
        if (this.$route.query.download === 'Y') {
            this.Report('download')
        }
    },
    methods: {
        Report (flag) {
            if (flag !== '') {
                let pdfName = 'riva'
                let doc = new jsPDF()
                doc.setFontType('bold')
                doc.setFontSize(12)
                let pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight()
                let pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth()
                doc.setFillColor(255,255,255)
                doc.rect(172,4,30,8,'FD')
                doc.text(this.document_category,180,10)
                doc.text(this.profile_id, pageWidth / 2, pageHeight  - 285, 'center')
                doc.setFontType('')
                doc.setFontSize(10)
                doc.text(this.profile_name, 10,20, {maxWidth: 190, align: 'justify'})
                let columns = [
                    {title: 'ID', dataKey: 'profile_id'},
                    {title: 'Name', dataKey: 'profile_name'},
                    {title: 'Actived', dataKey: 'profile_actived'}
                ]
                this.TableList()
                doc.autoTable(columns, this.rows)
            if (flag === 'download') {
                doc.save(pdfName + '.pdf')
            } else if (flag === 'preview') {
                this.dialog_loading = true
                this.urlpdf = doc.output('bloburl')+'#toolbar=0'
                this.dialog_loading = false
            }  else if (flag === 'newwindow') {
                this.dialog_loading = true
                this.dialog_preview_print = true
                this.urlpdf = doc.output('bloburl')+'#toolbar=0'
                this.dialog_loading = false
            } else if (flag === 'print') {
                this.dialog_loading = true
                doc.autoPrint()
                this.urlpdf = doc.output('bloburl')
                this.dialog_loading = false
            } 
        }
        },
        TableList (){
            let formData = new FormData()
            formData.append('profile_id', this.profile_id)
            formData.append('profile_name', this.profile_name)
            this.$axios.post(this.$functions.SafeURL('apiListProfile', ``), formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
                }
            })
            .then(response => {
            this.rows = []
            for (let i = 0;i < response.data.length;i++) {
                this.rows.push({profile_id: response.data[i].profile_id,profile_name: response.data[i].profile_name,profile_actived: response.data[i].profile_actived})
            }
            })
            .catch(e => {
                console.log(e)
            })
        }
    }
}

Answer 1

Vue 检测到对 rows 的更改，如果您在模板中添加 {{ rows }}，您会看到。

但是对行所做的更改不会自动导致 urlpdf 值的更改。

您可以在 rows 上添加一个 watch 到运行更新 pdfurl 的代码，但在这种情况下，我会在响应后调用 Report() 方法已处理并且行包含结果，如下所示：

.then(response => {
  this.rows = []
  for (let i = 0;i < response.data.length;i++) {
    this.rows.push({profile_id: response.data[i].profile_id,profile_name: response.data[i].profile_name,profile_actived: response.data[i].profile_actived})
  }
  this.Report('preview') // <- here
})

Vue Axios 推送数组未实时更新

Vue Axios Push Array isn't updated live

javascript

vue.js

jspdf-autotable

axios