[Vuejs]-Show and hide dynamic data of a column on button click in Vue and laravel

by

0👍

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>

Leave a comment