javascript - (Vue.js) 表格排序后保留item的详细信息 View

Question

我有一个表格来显示一些信息，但我希望“ID”标题能够反转行的顺序，当我单击行时，我可以看到所单击行的具体信息，问题是当我点击“ID”标题来反转顺序时，显示的信息也会改变，我猜是因为不知何故单击的行的ID发生了变化，我不知道如何保留单击的ID，即使行已更改，

//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>

projectData 来自 App.vue 是一个 axios 调用，其中包含一些行数据，我将“ShowProjectDetails(id) 函数传递给 DashboardTable 和表内的一个按钮，以便能够单击和显示所需的数据。

//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();
      }    

所以问题是，当我单击“ID”标题来反转行的顺序时，详细 View 也会随着行的顺序而变化，我想保留 View 直到再次单击另一行，而不是当顺序发生变化。

谢谢大家

Answer 1

尝试

:key="project.id"

而不是

:key="idx"