Day19 - 轻前端 Vue - 复杂型别 object + collection

Case01

内容跟 Day08 / Day11 差不多，主要是 js 多了 ajax 的处理 !

OrderDate 栏位的部份，我选择在前端把日期後面的 T 跟时间删掉

<div id="app" v-cloak>
    <form autocomplete="off"
          v-on:submit.prevent="submit_form">
        <p>
            <label for="OrderDate">订单日期：</label>
            <input type="date"
                   v-model="vue_model.OrderDate"
                   id="OrderDate" />
        </p>
        <div>
            <label>订单项目</label>
            <p v-for="(item, index) in vue_model.Items"
               v-bind:key="index">
                <input type="text"
                       v-model="vue_model.Items[index]" />
            </p>
        </div>
        <p>
            <button type="submit">送出</button>
        </p>
    </form>

    <p>
        <a v-bind:href="prev_url">回上一层</a>
    </p>
</div>

@section Scripts
{
    <script>
        const app = createApp({
            setup(){

                const post_url = '@Url.Action("PostCase01")';
                const prev_url = '@Url.Action("Index")';
                const vue_model = reactive(@Html.Raw(Model.ToJson()));

                const submit_form = function() {
                    fetch(post_url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify(vue_model),
                    })
                    .then(response => response.json())
                    .then(data => {
                        vue_model.OrderDate = data?.OrderDate?.split('T')[0];
                        vue_model.Items = data?.Items;
                    });
                }

                return {
                    post_url,
                    prev_url,

                    vue_model,

                    submit_form,
                }
            }
        });

        const vm = app.mount('#app');
    </script>
}

如果不想在前端处理 Date，可以试试在後端加上自订处理，有兴趣的人可以玩看看