title: Show extra card from v-for list of cards
body: <p>I'm trying to show a card with extra information for each card inside a v-for loop.</p>
  <pre><code>&lt;template&gt;
      &lt;div v-for=&quot;card in cards&quot;&gt;
          &lt;card&gt;
              &lt;!-- card content with information --&gt;
              &lt;button @click=&quot;viewExtra&quot; /&gt;
          &lt;/card&gt;
          &lt;card v-if=&quot;card.infoExtra &amp;&amp; showExtra&gt;
              &lt;!-- card content with extra information --&gt;
          &lt;/card&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data: () =&gt; ({
              cards: [] // Array with cards and information
              ,showExtra: false 
          }),
          methods: {
              viewExtra() {
                  this.showExtra = !this.showExtra;
              }
      }
  &lt;/script&gt;
  </code></pre>
  <p>It should only show extra card if principal card contains extra information (card.infoExtra) but it's showing for all cards that have infoExtra, not for the one on which I click the button.</p>
  <p>Here's what I've done so far:</p>
  <p><a href="https://i.stack.imgur.com/UUJzB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UUJzB.gif" alt="enter image description here" /></a></p>
  <p>What am I doing wrong.</p>
  <p>Thanks in advance.</p>