Как обновить данные из vue-tables-2 после действия из Template? - PullRequest
Новая
       37

Как обновить данные из vue-tables-2 после действия из Template?

0 голосов
/ 07 мая 2019

Я использую пользовательский компонент в качестве столбца в vue-tables-2, для этого я использую vue-компонент, как описано здесь: vue-components

Я создал кнопку, которая открывает модальное окно для подтверждения пользователем некоторой информации, и после этого я делаю запрос к бэкэнду, и запись изменяется в базе данных. Теперь я хочу обновить данные в таблице, но я не знаю, как это сделать. В документации сказано об использовании $ ref , но это не вариант, потому что мой компонент не является родительским.

Как я могу это сделать?

Ссылки на код:
Компонент с использованием '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>

Компонент, который используется в качестве пользовательского столбца: 

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

1 Ответ

2 голосов
/ 07 мая 2019

  • Сначала определите 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>

  • Наконец, событие emit в модальном 

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