jam-pots-vuejs/src/App.vue

<template>
    <div class="tabs">
        <div class="tabs__buttons">
            <button
                @click="activeTab = 'Intro'"
                :class="activeTab === 'Intro' && 'active'"
            >
                Задача
            </button>
            <button
                @click="activeTab = 'Pots'"
                :class="activeTab === 'Pots' && 'active'"
            >
                Банки
            </button>
            <button
                @click="activeTab = 'Jams'"
                :class="activeTab === 'Jams' && 'active'"
            >
                Варенья
            </button>
            <button
                @click="activeTab = 'Result'"
                :class="activeTab === 'Result' && 'active'"
            >
                Разливаем
            </button>
        </div>

        <Intro v-show="activeTab === 'Intro'" class="tabs__body" />
        <Pots
            v-show="activeTab === 'Pots'"
            class="tabs__body"
            :pots="pots"
            @removePot="removePot"
            @addPot="addPot"
        />
        <Jams
            v-show="activeTab === 'Jams'"
            class="tabs__body"
            :jams="jams"
            @removeJam="removeJam"
            @addJam="addJam"
        />
        <Result v-show="activeTab === 'Result'" class="tabs__body" />
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import Intro from "./components/Intro";
import Pots from "./components/Pots";
import Jams from "./components/Jams";
import Result from "./components/Result";

export default {
    name: "App",
    components: {
        Intro,
        Pots,
        Jams,
        Result,
    },
    data: function () {
        return {
            activeTab: "Intro",
            pots: [
                { id: "b1", vol: 3000 },
                { id: "b2", vol: 1000 },
                { id: "b3", vol: 100 },
                { id: "b4", vol: 850 },
                { id: "b5", vol: 500 },
                { id: "b6", vol: 750 },
                { id: "b7", vol: 500 },
                { id: "b8", vol: 450 },
                { id: "b9", vol: 450 },
                { id: "b10", vol: 300 },
                { id: "b11", vol: 350 },
                { id: "b12", vol: 100 },
                { id: "b13", vol: 150 },
                { id: "b14", vol: 100 },
                { id: "b15", vol: 50 },
            ],
            jams: [
                { id: "j1", vol: 3550 },
                { id: "j2", vol: 1700 },
                { id: "j3", vol: 2220 },
            ],
        };
    },
    methods: {
        removePot: function (index) {
            this.pots.splice(index, 1);
        },
        addPot: function (id, vol) {
            const f = this.pots.filter((p) => p.id === id);
            if (f.length > 0) {
                f[0].vol = +vol;
            } else {
                this.pots.push({ id, vol: +vol });
            }
        },
        removeJam: function (index) {
            this.jams.splice(index, 1);
        },
        addJam: function (id, vol) {
            const f = this.jams.filter((j) => j.id === id);
            if (f.length > 0) {
                f[0].vol = +vol;
            } else {
                this.jams.push({ id, vol: +vol });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
#app {
    margin-top: 60px;
}

.tabs {
    max-width: 1440px;
    margin: 1rem;
    min-height: 75vh;
    display: flex;
    flex-direction: column;

    &__buttons {
        display: flex;
        flex-direction: row;

        button {
            appearance: none;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.25rem;
            background: #ccc;
            border-bottom: 1px solid #ccc;

            &.active {
                background: #fff;
                border-bottom: 1px solid #fff;
            }
        }
    }

    &__body {
        background: #fff;
        flex-grow: 1;
        padding: 1rem 2rem;
    }
}
</style>