Close Previous Table Row When Clicking On Another Table Row

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

Solution 1:

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

And in your 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.