Vue Laravel: Reactive Nested Array value is Empty on Backend

Viewed 32

I'm relatively new to Vue JS. So I have this case on Form Submit.

This is what I've submitted in Console Log:

{
  amount: [
    monday: "123",
    tuesday: "97438"
  ],
  day_of_week: "perday",
  started_at: "2022-09-14"
}

And what it received in Laravel Backend when I dump the data is this:

^ array:3 [
  "started_at" => "2022-09-14"
  "day_of_week" => "perday"
  "amount" => []
]

So My Question Is, what did I do wrong? How is the "amount" part not included on the backend? It already looks right on the console.log. I do appreciate help here. I reckon I did a mistake on how to write the model name in the array part inside HTML, but still, I do not know how to do it right.

THANK YOU IN ADVANCE

This is how I submit my form:

HTML Vue Page:

    <div class="card-body p-9">
        <div class="row mb-8">
            
            <div class="col-xl-3">
                <div class="fs-6 fw-semibold mt-2 mb-3">Type of Rate</div>
            </div
            
            <div class="col-xl-9 fv-row">
                <VueMultiselect v-model="day_of_week" label="name" track-by="name" placeholder="Select Type" :options="type_of_day" :close-on-select="true">
                    <template slot="singleLabel" slot-scope="{ type_of_day }"><strong>{{ type_of_day.name }}</strong></template>
                </VueMultiselect>
            </div>
            
        </div>
        
        
        <div class="row mb-8">
            
            <div class="col-xl-3">
                <div class="fs-6 fw-semibold mt-2 mb-3">Started Date</div>
            </div
            
            <div class="col-xl-9 fv-row">
                <div class="position-relative d-flex align-items-center">
                    <input v-model="ticketing.started_at" class="form-control form-control-solid ps-12" name="date" placeholder="Pick Start date" id="kt_datepicker_1" />
                </div>
            </div>
            
        </div>
        
        <div v-if="day_of_week">
            <div v-if="day_of_week.value == 'allday'" class="row mb-8">
                
                <div class="col-xl-3">
                    <div class="fs-6 fw-semibold mt-2 mb-3">Entrance Rate</div>
                </div>
                
                <div class="col-xl-9 fv-row">
                    <div class="input-group mb-5">
                        <span class="input-group-text">Rp.</span>
                        <input v-model="amount.allday" type="text" class="form-control" aria-label="Amount"/>
                    </div>
                </div>
                
            </div>
            <div v-if="day_of_week.value == 'perday'" class="row mb-8">
                <div class="col-12 mb-8">
                    <div class="fs-6 fw-bold mt-2 mb-3">Entrance Rate Per Day of Week</div>
                </div>
                
                <div class="col-xl-3">
                    <div class="fs-6 fw-semibold mt-2 mb-3">Monday</div>
                </div>
                
                <div class="col-xl-9 fv-row">
                    <div class="input-group mb-5">
                        <span class="input-group-text">Rp.</span>
                        <input v-model="amount.day.monday" type="text" class="form-control" aria-label="Amount"/>
                    </div>
                </div>
                
                
                <div class="col-xl-3">
                    <div class="fs-6 fw-semibold mt-2 mb-3">Tuesday</div>
                </div>
                
                <div class="col-xl-9 fv-row">
                    <div class="input-group mb-5">
                        <span class="input-group-text">Rp.</span>
                        <input v-model="amount.day.tuesday" type="text" class="form-control" aria-label="Amount"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer d-flex justify-content-end pb-6 px-9">
        <span @click="storeNewRate" class="btn btn-primary">Create New Rate</span>
    </div>
</template>

This Is the script Part

<script>
    import { onMounted, toRaw } from "vue";
    import useTicketing from "../../../composable/ticketing";
    export default {
        data() {
            const { storeTicketing, ticketing } = useTicketing()

            const storeNewRate = async () => {
                let type = this.day_of_week.value
                let submittedAmount = []
                type == 'allday' ? submittedAmount = this.amount.allday : submittedAmount = this.amount.day
                this.ticketing.day_of_week = this.day_of_week.value
                this.ticketing.amount = submittedAmount
                console.log('submit: ', toRaw(ticketing))
                await storeTicketing({...ticketing})
            }
            return {
                type_of_day: [
                    {
                        "name": "All Days of Week",
                        "value": "allday"
                    },
                    {
                        "name": "Rate per Day",
                        "value": "perday"
                    },
                ],
                started_at: '',
                day_of_week: '',
                amount: {
                    allday: '',
                    day: []
                },
                storeNewRate,
                ticketing
            }
        }
    }
</script>

And I have Separate file for handling the API:

export default function usePlan() {
    const ticketing = reactive({});

    const router = useRouter();

    let toastr = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 5000
    })

    const storeTicketing = async (data) => {
        let errors = ''
        try {
            let response = await axios.post('/api/ticketing/create', data);
            ticketing.value = response.data;
            await toastr.fire("Success", "New Rate Has Been Created!", "success");
        } catch (e) {
            if(e.response.status === 422) {
                for(const key in e.response.data.message) {
                    errors = e.response.data.message[key][0];
                    toastr.fire("Failed", errors, "error");
                }
                errors = ''
            }
        }
    }

    return {
        storeTicketing,
        ticketing
    }
}

0 Answers
Related