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

<template>
    <div>
        <input type="date" v-model="meal.date" />
        <recipe-search-box @select-recipe="selectRecipe" />
    </div>
</template>

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

export default {
    props: ['id'],
    components: { RecipeSearchBox },
    data() {
        return {
            meal: {
                date: new Date(),
                recipes: [{ name: 'Sar Tay' }],
                chefs: [{ name: 'Ryan' }],
                consumers: [{ name: 'Ryan' }, { name: 'Jacob' }],
            }
        };
    },
    beforeMount() {
        if (this.id) {
            this.meal = data.getMeal(this.id);
        }
    },
    methods: {
        selectRecipe(recipe) {
            this.meal.recipe = recipe;
        }
    }
}
</script>