Question

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

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

我该怎么做？

<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>

Answer 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());
    }

从模板执行操作后如何从vue-tables-2更新数据？

1 个答案: