(Vue.js)对表进行排序后，保留项目的详细信息视图

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>

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

//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"标题以反转行的顺序时，详细视图也会随着行的顺序而变化，我想保留视图直到再次单击另一行，而不是当顺序更改时。

谢谢你们

Answer 1

尝试

:key="project.id"

而不是

:key="idx"