I have HTML table which I am rendering from JSON data through vue.js, I want to group my table row and print some total and console which are common with there sum of amount respectivelly
Here is my code
var vue = new Vue({
el: '#textExample',
data: {
loans: [{"1": 1,"2": 2,"3": 3,"4": 4
},
{
"1": 'Sam',"2": 'Sam',"3": 'Tom',"4": 'Tom'
},
{
"1": 'Bakery',"2": 'Household',"3": 'Retailer',"4": 'Sports'
},
{"1": 6300,"2": 5987.2,"3": 5646.25,"4": 5274.61
},
]
},
methods: {
group() {
alert('Click')
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="textExample"><table class="table table-bordered"><thead><tr><th> Month</th><th>Name</th><th>Bussiness Name</th><th> Interest</th></tr></thead><tr v-for="loan in loans[0]"><td v-for="otherloan in loans">{{otherloan[loan]}}</td></tr></table><button @click="group">Group</button></div>Here in my table I have two rows Tom'Sam' and they are having different types of business I want to group them in two rows on click, tom's two business and Sam's I want to group their amount on click,I am not getting any idea to do it.
I want to do it like this sam=6300+5987.2=12287.2 same for Tom = 5646.25+5274.61=10920.86
