title: v-for loop and use of key attribute
body: <p>Could not frame the title more relevantly , sorry for that....</p>
  
  <ul>
  <li><p>I have an [ ] in my data property which gets filled with items with a call from external API</p></li>
  <li><p>I loop through the [ ]  using <code>v-for</code> on the <strong>main div</strong> in my template and populate the page </p></li>
  <li><p>there is a <strong>toggleable div</strong> in every <strong>main div</strong> which is hidden by default and is toggleable whether to display or not</p></li>
  </ul>
  
  <p><strong>here's the code</strong></p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div&gt;    
        // MAIN DIV
        &lt;div v-for="(item, index) in myArray :key="index"&gt; 
            //populate the elements using revelevant data
          &lt;button @click="toggleDiv""&gt;show/hide&lt;/button&gt;
  
          //togglelable div
             &lt;div v-if="displayDiv"&gt;
              //some data
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
          data(){
              return{
                  myArray: [],
                  displayDiv: false
              }
          },
          methods: {
              toggleDiv(){
                  this.displayDiv = !this.displayDiv;
              }
          }
  
      }
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>So here's my problem</strong></p>
  
  <ul>
  <li><p>when i click the button in a particular div to show the hidden div, all the hidden divs of the rest all divs are also getting displayed</p></li>
  <li><p>how do i restrict this from happening so that only respective hidden div is toggled when respective button of that div is clicked</p></li>
  <li><p>should I use <code>key</code> attribute to let vue distinguish the divs or i should use any logic</p></li>
  </ul>