在Vue和laravel中点击按钮时显示和隐藏列的动态数据。

Question

我有一个表格，每一行都有一个按钮 "显示详细信息"。我有另一个div堆叠在表格中，所以当我点击按钮时，我希望表格显示在特定的列中。但我不能指出哪一行的按钮被点击，以显示和隐藏被点击行的div。这是我的代码。

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

这是我的vue代码

export default {
    data(){
        return{
            editMode: false,
            showDetails: false,
            population:{}
            })
        }
    },
    methods: {
        show(index){
            this.showDetails = true;
        },

Answer 1

你的showDetails是全局的，如果你点击一个，你点击，vue将显示所有元素。你的代码必须像这样的代码。

    new Vue({
      el: '.table',
      data: {
        populations: [
          {  showDetails: false, job: 'A' },
          {  showDetails: false, job: 'B' },
          {  showDetails: false, job: 'C' }
        ]
      }
    });


<script src="https://unpkg.com/[email protected]/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>