<tr v-for='(women, index) in womenServices' :key="index">
<td class="text-center" style="width: 30px;">
<div class="custom-control custom-checkbox d-inline-block">
<input type="checkbox" class="custom-control-input"
:id="'chk_wm' + index"
:name="'chk_wm' + index"
:data-price="women.price"
:value="women.id" v-model="womenPackageServices">
<label class="custom-control-label" :for="'chk_wm' + index"></label>
</div>
</td>
<td>
!{women.title}!
</td>
<td>
!{women.price}!
</td>
</tr>
<input type="text" class="form-control" :v-model="packageServicesSum" placeholder="Total Price" readonly>
const app = new Vue({
el: '#addVueServices',
delimiters: ['!{', '}!'],
data: {
womenPackageServices: [],
packageServicesSum: 0,
},
methods: {
}
computed: {
},
})
v-model is functioning perfectly, successfully obtaining ids and updating womenPackagesServices object
However, an issue arises
I am aiming to retrieve the data attribute value to display the total SUM of Price and Count of selected Services.
If there is a simpler method to calculate the total price, please assist me as I intend to maintain womenPackageServices as this array will be sent to the database to save the selected checkbox ids.
I am not utilizing any components and do not wish to do so.