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

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

1 个答案: