show and hide dynamic data of a column on button click in Vue and laravel - vue.js

Question

I have a table where each row has a button 'show details'. I have another div stacked within the table, so on clicking the button I want the table to be displayed in the particular column. But I am not able to point which button is clicked from which row to show and hide the div on the clicked row. Here is my code:
<table class="table nowrap scroll-horizontal-vertical">
<thead>
<tr>
<th>SN</th>
<th>Ward no</th>
<th>Personal details</th>
<th>Social security</th>
</tr>
</thead>
<tbody>
<tr v-for="(pop,index) in population" :key="pop.ward_no">
<td>{{index+1}}</td>
<td>{{ pop.ward_no }}</td>
<td>{{ pop.birth }}</td>
<td>
<a href="#" #click="show(index)" class="btn btn-primary">
Show Details
</a>
//show or hide div below on clicking show details button
<div v-show="showDetails">
<h4>Citizen </h4>
<div class="row">
<div class="col-3">{{pop.female}}</div>
<div class="col-2"> {{ pop.male }}</div>
<div class="col-2"> {{ pop.other }}</div>
</div> <br>
</div>
</td>
<td>
<a href="#" class="btn btn-primary" #click="editModal(pop)">
<i class="fa fa-edit"></i>
</a>
<a href="#" class="btn btn-primary" #click="deletePopulation(pop.ward_no)">
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
This is my vue code:
export default {
data(){
return{
editMode: false,
showDetails: false,
population:{}
})
}
},
methods: {
show(index){
this.showDetails = true;
},

Answer 1

Your showDetails is global and if you click one, you click, vue will show all elements. Your code must be like this code.
new Vue({
el: '.table',
data: {
populations: [
{ showDetails: false, job: 'A' },
{ showDetails: false, job: 'B' },
{ showDetails: false, job: 'C' }
]
}
});
<script src="https://unpkg.com/vue#2.5.2/dist/vue.min.js"></script>
<table class="table">
<tbody>
<tr v-for="(pop, index) in populations">
<td><p v-show='pop.showDetails' class="Detail">My Details</p></td>
<td><a #click="pop.showDetails = false">hide Details</a></td>
<td><a #click="pop.showDetails = true">show Details</a></td>
</tr>
</tbody>
</table>