title: How do I add 'active' class dynamically on vue js 2?
body: <p>My view is like this :</p>
  
  <pre><code>&lt;ul class="nav nav-tabs nav-cat"&gt;
      @foreach($countries as $country)
          &lt;li role="presentation" class="{{ $loop-&gt;first ? 'active' : '' }}"&gt;&lt;a href="javascript:;" data-toggle="tab" @click="$refs.player.getPlayer({{ $country-&gt;id }})"&gt;{{ ucfirst($country-&gt;name) }}&lt;/a&gt;&lt;/li&gt;
      @endforeach
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want add <code>class="active"</code> in li tag. So, when the tab clicked, the li tag will active</p>
  
  <p>How can I do it?</p>