Why is the for loop with show/hide not working in Vue JS?

Question

I have created for loop which works but for some reason the show/hide part does not work and no matter what I just can't figure out why.

<div id="app">

  <ul>
    <li v-for="club in clubs" v-on:click="toggleDetails(clubs)">
      <h1>{{club.name}}</h1>
      <div v-show="clubs.showDetail">
          <p>{{club.location}}</p>
          <p>{{club.members}}</p>
      </div>
    </li>
  </ul>

</div>

and for the JS part I have the following;

const clubs = [
    {
   name: 'Tigers',
   location: 'Manchester',
   members: '22'
    },
    {
   name: 'Dolphins',
   location: 'Miami',
   members: '19'
    },
    {
   name: 'Bleu Sox',
   location: 'Paris',
   members: '13'
    } 
];

const app = new Vue({
  el: '#app',
  data: {
    title: 'Here is a list',
    club: clubs
  },
  methods: {
        toggleDetails: function(clubs) {
        clubs.showDetail = !clubs.showDetail;
    }  
  }
});

Answer 1

If you need to show detail on each club separately, you need to set a property on each club separately instead of on clubs; Also use Vue.set to reactively add a new property to an object as follows:

const clubs = [
    {
   name: 'Tigers',
   location: 'Manchester',
   members: '22'
    },
    {
   name: 'Dolphins',
   location: 'Miami',
   members: '19'
    },
    {
   name: 'Bleu Sox',
   location: 'Paris',
   members: '13'
    } 
];

const app = new Vue({
  el: '#app',
  data: {
    title: 'Here is a list',
    clubs
  },
  methods: {
    toggleDetails: function(club) {
      this.$set(club, 'showDetails', !club.showDetails)
    }  
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<div id="app">
  
  <ul>
    <li v-for="club in clubs" v-on:click="toggleDetails(club)">
      <h1>{{club.name}}</h1>
      <div v-show="club.showDetails">
          <p>{{club.location}}</p>
          <p>{{club.members}}</p>
      </div>
    </li>
  </ul>
  
</div>