munch-ease-frontend/src/components/IngredientAddBox.vue

<template>
<div class="ingredient-add-box">
    <p class="ingredient-line">
        <ingredient-line :ingredient="ingredient"
            @update-ingredient="updateIngredient"
            @update-product-link="updateProduct" />
    </p>
    <button @click="addIngredient(ingredient)">Add</button>
</div>
</template>

<script>
import IngredientLine from './IngredientLine.vue';
import data from '@/data.js'

export default {
    name: 'IngredientAddBox',
    components: { IngredientLine },
    data() {
        return {
            ingredient: {},
        }
    },
    methods: {
        addIngredient() {
            this.$emit('add-ingredient', this.ingredient);
            this.ingredient = {};
        },
        async updateProduct(ingredient, product_link) {
            this.ingredient.product = await data.parseProduct(ingredient, product_link);
        },
        async updateIngredient(ingredient, line) {
            const newIngredients = await data.parseIngredients([line]);
            this.ingredient = newIngredients[0];
        },
    }
}

</script>

<style scoped>

.ingredient-add-box {
    display: flex;
    flex-direction: column;
}

.ingredient-line {
    flex: 1;
}

</style>