I am currently in the process of learning Vue in order to complete my project, which has a Java Spring backend. The endpoint I am working with expects an object with the following values:
LocalDate date;
Long buyerId;
Long supplierId;
List<OrderDetailsDto> orderDetails;
In Vue, my object structure is as follows:
order: {
date: '',
buyerId: 0,
supplierId: 0,
orderDetails: [
{
quantity: 0,
product: {
id: 0
}
}
]
}
The input fields for quantity and products that I have set up are causing an issue:
<div class="form-group">
<label>Ilość (m3)</label>
<input type="number" id="quantity" class="form-control" v-model="order.orderDetails.quantity"/>
</div>
<div class="form-group">
<label>Wybierz product</label>
<select v-model="order.orderDetails.product">
<option
v-bind:value="{id: product.id, name: product.product}"
v-for="product in products"
v-bind:key="product.id"
>{{ product.product }}</option>
</select>
</div>
When I check the request object just before sending it (using console.log), it looks like this:
{__ob__: Observer}
date: (...)
buyerId: (...)
supplierId: (...)
orderDetails: Array(1)
quantity: "22"
product: Object
0:
quantity: 0
product: Object
This is where the issue arises. The variables I have declared in Vue are at index [0] in orderDetails. The values such as quantity: "22", product: Object are not being sent, as the endpoint thinks the array is empty. If I remove the values from the array in the Vue object, the console.log appears correct but the endpoint still does not receive the values in the array.
Does anyone have any ideas on how to solve this problem?