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

<template>
    <div class="ingredient-item">
        <p>
            <input v-model="ingredientText" @keyup.enter="updateIngredient" @blur="updateIngredient" placeholder="Enter an ingredient" />
            <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @blur="updateProductLink" />
        </p>
        <p>
            <!-- Single line parse results -->
            <compact-parsed-ingredient :ingredient="ingredient" />
        </p>
    </div>
</template>

<script>
import CompactParsedIngredient from './CompactParsedIngredient.vue';

export default {
    props: {
        ingredient: { type: Object },
    },
    events: ['update-ingredient', 'update-product-link'],
    components: { CompactParsedIngredient },
    data() {
        return {
            ingredientText: this.ingredient.line,
            productLink: this.ingredient.product?.link ?? "",
        };
    },
    watch: {
        ingredient: {
            handler: function (newIngredient) {
                this.productLink = newIngredient.product?.link ?? "";
            },
            deep: true,
        },
    },
    methods: {
        updateIngredient() {
            if (this.ingredientText != this.ingredient.line)
                this.$emit('update-ingredient', this.ingredient, this.ingredientText);
        },
        updateProductLink() {
            if (this.productLink && this.productLink != this.ingredient.product?.link)
                this.$emit('update-product-link', this.ingredient, this.productLink);
        }
    }
};
</script>

<style scoped>

input {
    border: 0;
    font-size: larger;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    width: 100%;
}

.product-link-input {
    padding: 0.5vh;
    color: #777;
    margin-top: 0.5vh;
}

</style>