lemon-admin/resources/views/app/my-account/admin/orders/forms/mark-as-shipped.blade.php

<div moe normal>
    <a start show href="#" class="text-success">Mark as shipped</a>
    <form url="{{ route('admin.orders.view.mark-order-as-shipped', $order) }}" right>
        @csrf
        <div id="markAsShipped_{{$order->iid}}">
            <input type="hidden" name="uid" value="{{ $order->uid }}">
            <input type="hidden" name="shippingDetailJson" value="{{ $order->shipping_detail_json }}">
            <div class="mb-2">
                <label>Tracking Number</label>
                <input type="text" v-model="form.tracking_number" class="form-control form-control-sm" />
            </div>
            <div>
                <button submit class="btn btn-sm btn-primary me-2">Mark as shipped</button>
                <button cancel class="btn btn-sm btn-default border">Cancel</button>
            </div>
        </div>
    </form>
</div>
<script>
    var markAsShipped = new Vue({
        el: '#markAsShipped_{{ $order->iid }}',
        data: {
            form: {
                tracking_number: null
            }
        },
        watch: {
            form: {
                handler: function(val, oldVal){
                    $('input[name=shippingDetailJson]').val(JSON.stringify(this.form));
                },
                deep: true
            }
        },
        methods: {
            init: function() {
                var defaultData = <?= json_encode($order->shipping_detail_json) ?>;
                try {
                    defaultData = JSON.parse(defaultData);
                }catch(e){}
                this.form = $.extend(this.form, defaultData);
            }
        },
        mounted: function() {
            this.init();
        }
    });
</script>