I have set up a Vue instance for handling the form data
var formInstance = new Vue({
el: '#amount_form',
data: {
logdate: '',
amount:'',
description:''
},
methods: {
processForm :function(event)
{
var formData = {"logdate":this.logdate,"amount":parseFloat(this.amount),"description":this.description};
console.log(formData);
var parameters =
{
"data":formData,
"url":"save",
"type":"post",
"data_type":"JSON",
"callback":function(data)
{
alert(data);
}
}
sendDataToServer(parameters);
}
}
});
Additionally, I have created a template for categories selection
var categorySelect = Vue.component('category-select',
{
data()
{
return{
options:[],
cat:""
}},
template:'<select class="form-control form-control-sm" v-model="cat">' +
' <option v-for="option in options" v-bind:value="option.id">{{option.name}}</option></select>',
created :function()
{
var templateObject = this;
var parameters =
{
"url":"getCategories",
"type":"GET",
"async":true,
"data_type":"JSON",
"callback":function(data)
{
templateObject.options = data;
}
}
sendDataToServer(parameters);
}
});
The template for categories is used within the form
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="log_date" class="sr-only">Date</label>
<input v-model="logdate" type="datetime-local" id="log_date" class="form-control form-control-sm" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="amount" class="sr-only">Amount</label>
<input v-model="amount" type="text" class="form-control form-control-sm" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="category" class="sr-only">Category</label>
<category-select></category-select>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="description" class="sr-only">Description</label>
<textarea v-model="description" class="form-control" id="description" aria-label="With textarea"></textarea>
</div>
</div>
</div>
</form>
To retrieve the form values, you can refer to the submitted data processed by the 'processForm' method.