pedi2/resources/js/components/compras/Body.vue

<template>
    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
        <comunes-tabs-secciones :tabs="tabs" :tabInicial="tabActiva"></comunes-tabs-secciones>
        <div class="block" id="pedidos-compras-seccion"
             :class="seccionActiva === 'pedidos-compras-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block">
                <div class="field">
                    <p class="control">
                        <a href="/compras/pedidos/descargar" class="button">
                        <span class="icon is-small">
                            <i class="fas fa-download"></i>
                        </span>
                            <span>Descargar planilla de totales</span>
                        </a>
                    </p>
                </div>
                <div class="field">
                    <p class="control">
                        <a href="/compras/pedidos/notas" class="button">
                        <span class="icon is-small">
                            <i class="fas fa-sticky-note"></i>
                        </span>
                            <span>Descargar planilla de notas</span>
                        </a>
                    </p>
                </div>
                <div class="field">
                    <p class="control">
                        <a href="/compras/pedidos/transporte" class="button">
                        <span class="icon is-small">
                            <i class="fa fa-truck"></i>
                        </span>
                            <span>Descargar planilla de transporte</span>
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <div class="block pb-6" id="canasta-compras-seccion"
             :class="seccionActiva === 'canasta-compras-seccion' ? 'is-active' : 'is-hidden'">
            <div class="block" id="canasta-compras-seccion">
                <p> Todavía no hay nada por acá </p>
            </div>
        </div>
    </div>
</template>

<script>
import TabsSecciones from "../comunes/TabsSecciones.vue";

export default {
    components: {
        TabsSecciones,
    },
    data() {
        return {
            tabs: [{ id: "pedidos-compras", nombre: "Pedidos" },
                { id: "canasta-compras", nombre: "Canasta" }],
            tabActiva: "pedidos-compras",
            seccionActiva: "pedidos-compras-seccion",
        }
    },
    methods: {
        setSeccionActiva(tabId) {
            this.tabActiva = tabId;
            this.seccionActiva = tabId + "-seccion";
        },
    }
}
</script>