How to implement color change on click in vue list?

Question

Vue.js

when you click on one of the elements, the color should change. I change immediately 2 .how to fix it?

<div class="example" :class="{ ' is-active' : isActive }" v-on:click="isActive=!isActive" >
        <a href="#"   >example1</a>
        <a href="#" >example2</a> </div>
<style>
  .is-active a{

    color: white;
    font-size: 15px;

  }
</style>

Answer 1

Since you have a list, it means, probably, a separate value should be responsible for the color of each element, and not like yours - one for all. Probably, these individual values ​​should be properties of the elements of the array, on the basis of which the markup will be created using v-for, and not manually, as you have done. Probably, if the elements should change color independently, the appropriate class and click handler should be assigned to the elements themselves, and not, as you have, to the container.
UPD. jsfiddle.net/42bfx93e