title: Toggle "active" class between child items vueJS.2
body: <p>I just want to know how to do it vue.js way, right now I am able to toggle <code>active</code> class on single item, when I click the other item, the <code>active</code> class still appear on previous item, here is my setup:</p>
  
  <p><strong>FileOne.vue (Parent component)</strong></p>
  
  <pre><code>// Say that I have 5 Items I am rendering here:
  &lt;template&gt;
    &lt;ul v-for="item in items"&gt;
      &lt;my-list-item :item-title="article.title"
                    :item-content="article.content"&gt; &lt;/my-list-item&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Items from './FileTwo'
    export default {}
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>fileTwo.vue (Child components)</strong></p>
  
  <pre><code>// When I click each Item the `active` class should be applied to the current Item and removed from previous item:
  &lt;template&gt;
    &lt;li :class="{'active': isRowActive}" @click.stop="toggleRowActive"&gt;
      &lt;h1&gt;{{articleTitle}}&lt;/h1&gt;
      &lt;p&gt;{{itemContent}}&lt;/p&gt;
    &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;  
    export default {
      name: 'my-list-item',
      data: function () {
        return {
          isRowActive: false,
        }
      },
      props: {
        articleTitle: String,
        articleContent: String,
      },
      toggleRowFn() {
        this.isRowActive = !this.isRowActive;
        this.showBtnReadContent = true;
      },
    }
  &lt;/script&gt;
  </code></pre>