1👍
The Form object declared in the data is not responsive (does not have responsive properties). Declare the form data as a simple object, and build the form new Form(this.salaryForm). At submission time.
See here for more detail about responsive properties.
var app = new Vue({
el: '#app',
data() {
return {
deductions: [{
"id": 2,
"title": "Pension",
"isPercent": 1,
"percentage": 2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T17:44:05.000000Z",
"updated_at": "2021-07-28T18:52:36.000000Z"
},
{
"id": 3,
"title": "Lateness",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 400,
"created_at": "2021-07-28T18:22:50.000000Z",
"updated_at": "2021-07-28T18:28:55.000000Z"
},
{
"id": 6,
"title": "Housing",
"isPercent": 1,
"percentage": 3.2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T19:53:08.000000Z",
"updated_at": "2021-07-28T19:53:08.000000Z"
},
{
"id": 7,
"title": "Car",
"isPercent": 1,
"percentage": 2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T20:14:04.000000Z",
"updated_at": "2021-07-28T20:14:04.000000Z"
},
{
"id": 8,
"title": "Medical",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 5000,
"created_at": "2021-07-28T20:14:48.000000Z",
"updated_at": "2021-07-28T20:14:48.000000Z"
},
{
"id": 9,
"title": "Transportation",
"isPercent": 0,
"percentage": null,
"isActual": 1,
"actual": 2000,
"created_at": "2021-07-28T20:16:29.000000Z",
"updated_at": "2021-07-28T20:16:29.000000Z"
}
],
salaryForm: {
id: '',
name: '',
salary: '',
commission: 0,
selectedDeductions: [],
amount_to_paid: '',
comment: '',
},
}
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<pre>{{ salaryForm.selectedDeductions.map(o => o.title) }}</pre>
<div v-for="deduction in deductions" :key="deduction.id" class="form-check form-check-inline">
<input class="form-check-input" :name="deduction.title" v-model="salaryForm.selectedDeductions" v-bind:value="deduction" :id="deduction.id" type="checkbox">
<label class="form-check-label" for="inlineCheckbox1">{{ deduction.title }}</label>
</div>
</div>1👍
Okay, that makes sense. The only issue I am seeing now is that you have enclosed your form object inside of new Form first off Form is not defined in your example code, therefore I assume you are intending to use FormData, or some other library I am not familiar with. If this is the case and you are intending to be using FormData for sending the data back to your server. Then you should be enclosing your object when you are making the API request.
Therefore your data would change to have the form object defined as so
data() {
return {
salaryForm: {
id: "",
name: "",
salary: "",
commission: 0,
selectedDeductions: [],
amount_to_paid: "",
comment: "",
},
}
}
Then in your API call, you would use the inbuilt FormData class to post back to the server.
const formData = new FormData();
Object.keys(this.salaryForm).forEach((key) =>
formData.append(key, this.salaryForm[key])
);
//Make API request
Here is a codebox with an example
0👍
You’re using Multiple checkboxes, you have to give an array in v-model, an array that will contain selected checkedboxes values. while here you send a preset array value that will not be binded to.
Just to say if you can have another array (selected:[]) in salaryForm that will receive all the selected checkboxes values it will work.
<input
class="form-check-input"
:name="deduction.title"
v-model="salaryForm.selected"
v-bind:value="deduction"
:id="deduction.id"
type="checkbox">
…
data() {
return {
salaryForm: new Form ({
id: '',
name: '',
salary: '',
commission: 0,
selected:[],
selectedDeductions: [
{
"id": 2,
"title": "Pension",
"isPercent": 1,
"percentage": 2,
"isActual": 0,
"actual": null,
"created_at": "2021-07-28T17:44:05.000000Z",
"updated_at": "2021-07-28T18:52:36.000000Z"
},
...
],
amount_to_paid: '',
comment: '',
}),
}