Почему цикл for с show / hide не работает в Vue JS?

Question

Я создал цикл for, который работает, но по какой-то причине часть show / hide не работает, и я не могу понять почему.

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

и для части JS у меня есть следующее:

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

Если вам нужно показать детали по каждому клубу отдельно, вам нужно установить свойство для каждого клуба отдельно, а не на clubs; Также используйте Vue.set для реактивного добавления нового свойства к объекту следующим образом:

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>