I’m fetching data into the table and on clicking any table row it open a nested colspan inside table row. to close previous table row if i click on another table row (Like accordion does )

this is a table body structure

<tbody style=”cursor:pointer” v-for=”(statement,index) in statements”>
<tr @click=”statementDetail(index,statement.paper_quality_id.id,statement.paper_brand_id.id,statement.paper_size_id.id,statement.thickness)”
\>
<td>{index+1}</td>
<td>
{statement.paper_quality_id.paper_quality} -
{statement.paper_size_id.length} X {statement.paper_size_id.width} -
{statement.paper_brand_id.paper_brand} -
{statement.thickness}
</td>
<td>
<div class=”row”>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.in_total_before - statement.total_out_before)/500)}</div>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.in_total_before - statement.total_out_before)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.total_sheets_in_range)/500)}</div>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.total_sheets_in_range)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.total_outward_range)/500)}</div>
<div
class=”col-md-4 text-center”
\>{parseInt((statement.total_outward_range)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div class=”col-md-4 text-center”>
{
parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)/500)
}
</div>
<div class=”col-md-4 text-center”>
{
parseInt((((statement.in_total_before - statement.total_out_before) + (statement.total_sheets_in_range)) - statement.total_outward_range)%500)
}
</div>
</div>
</td>
</tr>

This the nested table it appears when we click on table row

<tr :id=”‘show_‘+index” v-if = “index = indexData” >
<td colspan=”6”>
<table class=”table table-hover”>
<tr>
<th>Date</th>
<th>Opening</th>
<th>Inward</th>
<th>Outward</th>
<th>Balance</th>
</tr>
<tr v-for=”(_statement,index) in statements_details” >
<td>{_statement.date}</td>
<td>
<div class=”row”>
<div
class=”col-md-3 text-center”
\>{parseInt((_statement.opening.total_in - _statement.opening.total_out)/500)}</div>
<div
class=”col-md-3 text-center”
\>{parseInt((_statement.opening.total_in - _statement.opening.total_out)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div class=”col-md-3 text-center”>{parseInt((_statement.inward)/500)}</div>
<div class=”col-md-3 text-center”>{parseInt((_statement.inward)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div class=”col-md-3 text-center”>{parseInt((_statement.outward)/500)}</div>
<div class=”col-md-3 text-center”>{parseInt((_statement.outward)%500)}</div>
</div>
</td>
<td>
<div class=”row”>
<div
class=”col-md-3 text-center”
\>{parseInt((_statement.balance.total_in - _statement.balance.total_out)/500)}</div>
<div
class=”col-md-3 text-center”
\>{parseInt((_statement.balance.total_in - _statement.balance.total_out)%500)}</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>

This is my js file

export default {
data() {
return {
statements: ‘’,
users: [],
ledger_name: ‘’,
paper_details: ‘’,
account_list: false,
//statement Objects
id: ‘’,
start_date: ‘’,
end_date: ‘’,
paper_quality_id: ‘’,
paper_size_id: ‘’,
paper_brand_id: ‘’,
thickness: ‘’,
statements_details: ‘’,
stockIDS: ‘’,
indexData: ‘’
};
},
created() {
this.fetchData();
},
components: {
appInventoryNavigation: InventoryNavBar,
},
methods: {

// Fetching Ledger Account List
fetchData() {
var vm = this;
axios.get(‘/ledger/‘)
.then((response) => {
console.log(response)
vm.users = response.data
}).catch((err) => {
console.log(err)
});
},
//Setting LedgerID In Hidden Input Field
setLedgerID_1(id, name) {

this.account_name = id;
this.account_list = false;
this.id = id;
this.ledger_name = name;
},
call() {
this.account_list = true;
},
//Posting LedgeID
PostLedgerID(e) {
e.preventDefault();

const AccountDetail = {
id: this.id,
start_date: this.start_date + ‘ 00:00:00.957761’,
end_date: this.end_date + ‘ 00:00:00.957761’
}
var vm = this;
axios.post(‘/Statement/‘, AccountDetail)
.then((response) => {
console.log(response)
vm.statements = response.data;

}).catch((err) => {
console.log(err)
});
},

//Show Hide Nested Table
statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
this.indexData = rowid;
alert(this.indexData)
const userDetail = {
account_access_key_id: $(‘#ledger_id’).val(),
start_date: this.start_date + ‘ 00:00:00.957761’,
end_date: this.end_date + ‘ 00:00:00.957761’,
paper_quality_id: paper_id,
paper_brand_id: brand_id,
paper_size_id: size_id,
thickness: thickness
}
axios.post(‘/StatementDetail/‘, userDetail)
.then((response) => {

$(‘#show_‘ + rowid).toggle();
this.statements_details = response.data;
}).catch((err) => {
console.log(err)
});
}

},
};

Solution :

Change v-show=”indexData === index”.

And in the method check if rowid is changed and move this.indexData = rowid; after axios request:

statementDetail(rowid, paper_id, brand_id, size_id, thickness) {
if (rowid !== this.indexData){
const userDetail = {
account_access_key_id: $(‘#ledger_id’).val(),
start_date: this.start_date + ‘ 00:00:00.957761’,
end_date: this.end_date + ‘ 00:00:00.957761’,
paper_quality_id: paper_id,
paper_brand_id: brand_id,
paper_size_id: size_id,
thickness: thickness
}
axios.post(‘/StatementDetail/‘, userDetail)
.then((response) => {

$(‘#show_‘ + rowid).toggle();
this.statements_details = response.data;
}).catch((err) => {
console.log(err)
});
this.indexData = rowid;
}
}

Good luck.