jam-pots-vuejs/src/components/Pots.vue

<template>
    <div>
        <div class="pots-list">
            <div class="pots-list__header">
                <div class="id">ID</div>
                <div class="vol">Объем, мл</div>
            </div>
            <div class="pots-list__add">
                <div class="id"><input type="text" v-model.trim="addId" /></div>
                <div class="vol">
                    <input type="number" v-model.number="addVol" />
                </div>
                <div class="add"><button @click="$emit('addPot', addId, addVol); addId=''; addVol=0;">+</button></div>
            </div>
            <div
                v-for="(pot, index) in pots"
                :key="pot.id"
                class="pots-list__row"
            >
                <div class="id">{{ pot.id }}</div>
                <div class="vol">{{ pot.vol }}</div>
                <div class="remove" @click="$emit('removePot', index)">
                    &times;
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["pots"],
    emits: ["removePot", "addPot"],
    data() {
        return {
            addId: "",
            addVol: 0,
        };
    },
};
</script>

<style lang="scss" scoped>
.pots-list {
    &__header,
    &__add,
    &__row {
        display: flex;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #ccc;

        &:last-child {
            border-bottom: none;
        }

        .id {
            width: 7rem;
            flex-shrink: 0;
        }
        .vol {
            flex-grow: 1;
        }
    }
    &__header {
        background: #ccc;
    }
    &__add {
        input {
            width: 100%;
            padding: 0.3rem 0.5rem;
            font-size: 1.15rem;
        }
        .add {
            flex-shrink: 0;
            button {
                appearance: none;
                width: 100%;
                padding: 0.3rem 0.5rem;
            font-size: 1.15rem;
        }
        }
    }
    &__row {
        .remove {
            flex-shrink: 0;
            width: 1rem;
            cursor: pointer;
            &:hover {
                color: #f00;
            }
        }
    }
}
</style>