I've encountered an issue where a form with dynamically generated inputs based on API results is causing trouble. I can successfully retrieve data using Axios, but when trying to submit the user-entered data array back to the API, it fails.
Here's the template structure:
<form @submit.prevent="getReference" class="form-material form-horizontal">
<div class="row">
<div class="col-md-6"
v-for="(item, index) in items"
:key="item.id">
<div class="card bg-light-inverse ribbon-wrapper">
<div class="card-block">
<div class="ribbon ribbon-danger">{{index + 1}}</div>
<div class="row ribbon-content">
<input v-model="item.id" />
<label class="col-md-12 text-themecolor">Enter Amount To Pay</label>
<div class="card col-md-12 m-t-10">
<input
v-model.number="item.amount"
type="number"
class="form-control"
placeholder
max
min
/>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="btn btn-rounded btn-outline-danger waves-effect waves-dark"
>Get Refrence</button>
</form>
And here's the corresponding JavaScript code:
export default {
data() {
return {
items: {},
item: []
};
},
created() {
let uri = `/Api/${this.$route.params.id}/items`;
this.axios.get(uri).then(response => {
this.items = response.data;
});
},
methods: {
getReference() {
console.log(this.item);
let uri = "/api/reference";
this.axios.post(uri, this.item).then(response => {
this.$router.push({ name: "fee" });
});
},
}
};
Despite my efforts, attempting to submit the form results in nothing being sent and an uncaught exception: Object error in the console. I'm struggling to identify the problem. Any assistance would be greatly appreciated.