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

问题描述

我正在使用自定义组件作为 vue-tables-2 上的列，为此我使用了 vue-component，如下所述：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>

用作自定义列的组件：

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

标签： vue.jsvuejs2vue-tables-2

首先，如果您没有，则定义一个 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.js - 如何在模板操作后更新 vue-tables-2 中的数据？

问题描述

解决方案

推荐阅读