pedi2/resources/js/components/PedidosAdminSwitchAprobacion.vue

<template>
    <div class="field">
        <input type="checkbox" name="switchRoundedSuccess" class="switch is-rounded is-success"
            :id="'switch'+this.pedido.id"
            :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: "PedidosAdminSwitchAprobacion",
    props: {
        pedido: Object
    },
    data() {
        return {
            aprobado: this.pedido.aprobado
        }
    },
    computed: {
        mensaje: function () {
            return this.aprobado ? "Pagado" : "No pagado"
        }
    },
    methods: {
        toggleAprobacion() {
            Event.$emit('aprobacion-subpedido', this.pedido.id, !this.aprobado);
            this.aprobado = !this.aprobado
        }
    },
    mounted() {
        Event.$on('sync-aprobacion', (unPedido) => {
            if (this.pedido.id === unPedido.id) {
                this.pedido = unPedido
            }
        })
    }
}
</script>

<style scoped>

</style>