pedi2/resources/js/components/SubpedidoRowBotonAdmin.vue

<template>
    <div class="field">
        <input :id="'switch'+this.pedido.id" type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success" :checked="pedido.aprobado" @change="toggleAprobacion">
        <label :for="'switch'+this.pedido.id"><span class="is-hidden-mobile">{{ mensaje }}</span></label>
    </div>
</template>

<script>
export default {
    name: "BotonAdminSubpedidoRow",
    props: {'subpedido': Object},
    data() {
        return {
            pedido: this.subpedido
        }
    },
    computed: {
        mensaje: function () {
            return this.pedido.aprobado ? "Aprobado" : "No aprobado"
        }
    },
    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>