(Vue.js) keep the detailed information view of the item after sorting the table

Question

I have a table to display some information but I want the "ID" header to be able to reverse the order of the rows and when I click on the rows I can see specific information of the clicked row, the problem is that when I click on the "ID" header to reverse the order, the displayed information also changes, I guess because somehow the ID fo the row clicked is change, I don't know how to keep the clicked ID even if the order of the rows has changed,

//dashboard.vue
<template>
  <div class="dashboard">

    <DashboardTable :projectData="projectData" :showProjectDetails="showProjectDetails"/>

    <div v-if="shownDetails" class="project-details">
     <h1> {{projectData[currentProjectId].name}}</h1>
    </div>
  </div>
</template>
<script>
  import DashboardTable from '@/components/projects/table/DashboardTable'
  export default {
    name: 'Dashboard',
    components:{
      DashboardTable
    },
    props:['projectData'],
    data () {
      return {
        shownDetails: false,
        currentProjectId:null       
      }
    },
    methods:{
      showProjectDetails(id){
        this.shownDetails = true;
        this.currentProjectId = id;        
      }          
    },
  }
</script>

the projectData is coming from the App.vue is an axios call with some data for the rows and i'm passing the "ShowProjectDetails(id) function to the DashboardTable and a button inside the table to be able to click and display the desired data.

//DashboardTable.vue
<template>
    <div class="table table-container" role="table" aria-label="Projects Dashboard">
      <div class="table-header row-group" role="rowgroup">
        <div class="project-id header-row first"  role="columnheader" @click="reverseData">ID</div>
      </div>

      <div v-for="(project, idx) in projectData" :key="idx" class="id-1 table-content row-group" role="rowgroup">
        <div class="project-id content-row first" role="cell"> {{project.id}} </div>

//here is the call back
        <button @click="showProjectDetails(project.id)" aria-label="show project details" title="show project details" class="toggle-details"></button>


      </div>
    </div>
</template>

//and the method to reverse the data on the ID
      reverseData(){ 
        this.projectData = this.projectData.reverse();
      }

so the problem is that when I click the "ID" header to reverse the order the rows, the detailed view also changes with the order of rows and I would like to keep the view until another row is clicked again, not when the order changes.

thank you guys

Anatoly Anatoly · Accepted Answer · 2019-12-29T18:33:32

0

votes

Try

:key="project.id"

instead of

:key="idx"

(Vue.js) keep the detailed information view of the item after sorting the table

1 Answers