如何在模板操作后更新 vue-tables-2 中的数据？答案

【问题标题】：How to update data from vue-tables-2 after action from Template?如何在模板操作后更新 vue-tables-2 中的数据？
【发布时间】：2019-09-24 14:13:56
【问题描述】：

我正在使用自定义组件作为 vue-tables-2 上的一列，为此我正在使用 vue-component，如下所述：vue-components

我创建了一个按钮，该按钮打开一个模式，让用户确认一些信息，然后我向后端发出请求，并更改数据库上的记录。现在我想刷新表上的数据，但我不知道该怎么做。文档中提到了使用 $ref，但这不是一个选项，因为我的组件不是父组件。

我该怎么做？

代码链接：
Component using 'vue-tables-2'

<template>
    <div>
        <div id="payment">
            <input type="checkbox" v-model="onlyPending"  @change="filterPay()">Apenas pendentes</input>
            <v-server-table url="/api/payments" :columns="columns" :options="options" ></v-server-table>
        </div>
    </div>
</template>

<script>
import pay from './ModalConfirmPay.vue'
import {Event} from 'vue-tables-2';
    export default {
        name: "AeraListPayment",
        props: ['groupId'],
        data: function(){
            let groupId = this.groupId;
            return {
                columns: ['name','value','course','due_date','paid','installment','pay'],
                options: {
                    responseAdapter : function(data) {
                        data.data = data.data.map(payment => {
                            payment.paid = payment.paid ? "pago" : "pendente";
                            return payment;
                        })
                        return data;
                        },
                    headings: {
                        installment: 'Parcela',
                        paid: 'Status',
                        value: 'Valor',
                        due_date: 'Vencimento',
                        pay: 'Ação',
                        course: 'Curso',
                        name: 'Nome'
                    },
                    templates : {
                        pay
                    },
                    customFilters: ['onlyPending','groupId'],
                    initFilters:{groupId:groupId,onlyPending:true}
                },
                onlyPending: true
            }
        },
        methods: {
            filterPay(){
                Event.$emit('vue-tables.filter::onlyPending', this.onlyPending);
            }
        }
    }
</script>

Component that is being used as a custom column:

<template>
    <div>
        <button @click.prevent="show">Pagar</button>
        <modal :name="modalName">
            <p>Confirma o pagamento de {{data.value}} ?</p>
            <p>Parcela: {{data.installment}}</p>
            <p>Vecimento: {{data.due_date}}</p>
            <button @click.prevent="pay">Confirmar</button>
            <button @click.prevent="hide">Cancelar</button>
        </modal>
    </div>
</template>

<script>
import PaymentService from '../../services/PaymentService'
let service = new PaymentService();
export default {
    name:"ModalConfirmPay",
    props: ["data"],
    computed: {
        modalName: function () {
        // `this` aponta para a instância Vue da variável `vm`
        return `confirm-pay-${this.data.clientGroup_id}-${this.data.installment}`
        }
    },
    methods: {
        show () {
            this.$modal.show(this.modalName);
        },
        pay ( ) {
            service.pay(this.data)
                .then(this.hide());
        },
        hide () {
            this.$modal.hide(this.modalName);
        }
    }
}
</script>

【问题讨论】：

如果你能分享一些代码就好了，这样我们可以更好地理解你的问题
你好@PavelKovalev，我已经发布了源代码的链接。我编辑了问题以使其更清楚:)
是的，这是漫长的一天 :-) 我将这些代码添加到帖子中，以便其他人可以立即看到。

标签： vue.js vuejs2 vue-tables-2

【解决方案1】：

首先，如果没有的话，定义一个 EventBus

EventBus.vue

    import Vue from 'vue'
    export default new Vue()

在 ListPayment.vue 中，导入 EventBus 并监听 refresh-table 事件。请注意，我将 ref="table" 添加到 vue-tables-2 元素

<template>
  <v-server-table ref="table" ... />
</template>

<script>
import EventBus from './EventBus.vue'

export default {
  mounted() {
    EventBus.$on('refresh-table', this.refreshTable)
  },
  beforeDestroy() {
    EventBus.$off('refresh-table', this.refreshTable)    
  },
  methods: {
    refreshTable() {
      this.$refs.table.refresh();
    }
  }

}
</script>

最后，以模态方式发出事件

    pay() {
        service.pay(this.data)
            .then(() => {
              EventBus.$emit('refresh-table')
            })
            .then(this.hide());
    }

【讨论】：