pedi2/resources/js/components/SubpedidoRowBotonAdmin.vue

<template>
    <button class="button" :class="pedido.aprobado ? 'is-danger' : 'is-success'" @click="toggleAprobacion">
                <span class="icon is-small">
                  <i class="fas" :class="pedido.aprobado ? 'fa-times' : 'fa-check'"></i>
                </span>
        <span>{{ mensaje }}</span>
    </button>
</template>

<script>
export default {
    name: "BotonAdminSubpedidoRow",
    props: {'subpedido': Object},
    data() {
        return {
            pedido: this.subpedido
        }
    },
    computed: {
        mensaje: function () {
            return this.pedido.aprobado ? "Desaprobar" : "Aprobar"
        }
    },
    methods: {
        toggleAprobacion() {
            this.aprobado = !this.aprobado;
            Event.$emit('aprobacion-subpedido', this.pedido.id, this.aprobado);
        }
    },
    mounted() {
        Event.$on('sync-aprobacion', (unSubpedido) => {
            if (this.pedido.id === unSubpedido.id) {
                this.pedido = unSubpedido
            }
        })
    }
}
</script>

<style scoped>

</style>