title: Toggle inside v-for items affects the entire list, how can I make the each toggle affect only the containing list item?
body: <p>I'm making a list of items with v-for loop. Inside each item of the loop there is button with click event method that showing description text.
  When i click on the button, it should toggle only inside it's own item, but it affecting all elements in v-for list.</p>
  
  <p>So, how to make a toggle method that will affect only it's own item?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
  
      &lt;div v-for="item in items" :class="{ activeclass: isActive }"&gt;
  
        &lt;div class="item-text"&gt;
          {{item.text}}
        &lt;/div&gt;
        &lt;button @click="toggle()"&gt;show&lt;/button&gt;
  
        &lt;div v-show="isActive" class="item-desc"&gt;
          {{item.desc}}
        &lt;/div&gt;
  
      &lt;/div&gt;
  
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
  
      data () {
  
        return {
  
          items: [
            {
              text: 'Foo',
              desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
            },
            {
              text: 'Bar',
              desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
  
            }
          ],
  
          isActive: false
        }
      },
  
      methods: {
  
        toggle: function () {
          this.isActive = !this.isActive;
        }
  
      },
  
  
    }
  &lt;/script&gt;
  </code></pre>