I'm currently working on creating a table with rows that toggle when a 'View' button is clicked. The table is generated using a for loop for an array. I've successfully implemented the toggling functionality for preloaded data, but encountering issues when pushing new data to the array.
Any suggestions on how to make the rows toggle correctly when clicking 'View'?
Thank you in advance!
For reference, here is the link to the JSBin: JSBin
Below is the code snippet:
HTML
<div id="app">
<button type="button" class="btn btn-primary" @click="sites.push( {
sku: '1005',
purchasePrice: 4.50
})">Add Data</button>
<div class="table-wrapper">
<table class="table table-hovered">
<thead>
<tr>
<th>SKU</th>
<th>Purchase Price</th>
</tr>
</thead>
<tbody>
<template v-for="item in sites" >
<tr>
<th>{{ item.sku }}</th>
<th> {{ item.purchasePrice }}</th>
<th id="toggle" @click="addEvent($event, item)">
View
</th>
</tr>
<template v-if="item.showTab">
<tr>
<th class="subCol subTable" colspan="6">
Content
</th>
</tr>
</template>
</template>
</tbody>
</table>
</div>
</div>
Vue JavaScript
new Vue({
el: '#app',
data: {
sites: [
{
sku: "10001",
purchasePrice: "4.50",
showTab: false,
},
{
sku: "10002",
purchasePrice: "4.50",
showTab: false,
},
{
sku: "10003",
purchasePrice: "4.50",
showTab: false,
}
],
newData: [],
},
methods: {
addEvent(event, item, type, target) {
this.newData = [];
for (let i = 0; i < this.sites.length; i++) {
if (event.target.id == "toggle") {
item.showTab = !item.showTab;
}
}
this.newData.push(this.sites);
},
}
});