Question

我是vue的新手，我确实使用vue-tables-2通过created（）生命周期查看我的数据库数据，就在同一页面上，我也有一种总是将数据发送到此表的表格数据库，但是无论何时我向数据库中添加新文件，都需要在新插入的数据出现之前刷新页面。

我尝试将ref传递给表，但是它也不起作用，我也使用this.$parent.refresh，但是它也不起作用。这是代码

//Vue-table package

<v-client-table ref="table"
                  :data="packageData"
                  :columns="packageColumns"
                  :options="packageOptions"
                   >
                   <div slot="Action" slot-scope="{row}">

                    <b-button variant="outline-success" class="mr-2" v-b-modal.modal1 @click="editShip(row.id)">Edit Package</b-button>

                    </div>
        </v-client-table>

methods

            packageColumns:['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ,'Action'],
            packageOptions:{
                headings: {
                    description: 'Description',
                    quantity: 'Quantity',
                    weight: 'Weight',
                    length: 'Length',
                    height: 'Height',
                    width: 'Width',
                    dimension: 'Dimension',
                    category: 'Category'
                },
                sortable: ['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ],
                filterable: ['description', 'quantity', 'weight', 'length', 'height', 'width', 'dimension', 'category' ]
            },

async created(){
                        var unitnum = await sessionStorage.getItem('unitNo')
                        this.userDetail = details.data

                        ///here is were i the database request
                        const response = await Authentication.userPackage({
                            unitNo: unitnum
                        })
                        this.warehouseNo = response.data.warehouseNo
                        if(response.data.packages.air.length  > 0 ){
                            this.packageData = response.data.packages.air
                        else{
                            this.packageData = []
                        }
                    },

methods: {
       async addPackage(){
            try{
                var user = sessionStorage.getItem('user')
                var unitnum = sessionStorage.getItem('unitNo')
                const response = await Authentication.addShipment({
                   user: user,
                   unitno: unitnum,
                   category: this.category,
                   height: this.height,
                   itemweight: this.weight,
                   width: this.width,
                   length: this.length,
                   quantity: this.quantity,
                   description: this.itemDescription,
                   category: this.category,
                   reference: this.reference,
                   merchant: this.merchant,
                   note: this.note
                })
                const self = this
                self.display = true
                self.serverMsg = 'package has been added successfully';
//here is where i instruct my table to update on new data successful
                if(self.display = true)this.$parent.refresh()
                }catch(err){
                    if(err.response){
                            this.error = []           
                            if(err.response.status === 400) this.errors.push(err.response.data.message);
                            if(err.response.status === 404) this.errors.push(err.response.data.message);

               }
            }
       },

Vue-table-2表不会更新

0 个答案: