前回までの状況はこちら。

【ダイエット支援】【食事管理】データ詳細処理を作成する。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

データ入力処理ですが、すでにデータ入力画面や一連の処理は作成してあるので、同じ要領でデータ詳細画面にもデータ入力画面への導線を作成します。

EatingDetailComponent.vue

<template>

<-- 中略 -->

            <p id="inputbutton">
                <button @click="onClickInput">データ入力</button>
            </p>

<-- 中略 -->

        <eating-input-dialog-component :show="showInputDialogContent" :date="date" :datehold=false @update="invokeUpdateList"></eating-input-dialog-component>

<-- 中略 -->

</template>

<script>
export default {

    //中略

    methods: {
        onClickInput: function() {
            this.showInputDialogContent = true;
        },
        invokeUpdateList: function() {
            this.updateList();
        },