解决Vue动态修改样式的一些bug

因为项目需要，最近在入门学习Vue，结果遇到了好多bug，下面先来分享我其中之一的修bug过程：
大致的功能就是动态点击li下的a标签之后一些样式的改变。

<div class="assort">
     <ul id="assort">
         <li v-for="(item,index) in classifyTxt">
              <a href="javascript:void (0);" v-on:click.stop.prevent="showData($event,index)"
:class="{ 'red-link':index === isActive }" v-text="item.text" ></a>
         </li>
     </ul>
</div>

<style type="text/css">
    .red-link{
        color: saddlebrown;
        background-color:gray;
    }
</style>

var vmm = new Vue({
   el: "#assort",
   data: {
      isActive:0,
      datas: s.data, //可以忽略
      classifyTxt: [
         {text: '全部'},
         {text: '励志'},
         {text: '言情'},
         {text: '文学'},
         {text: '悬疑'},
         {text: '历史'},
         {text: '军事'},
         {text: '其他'}
                    ]
         },
      methods: {
         showData: function ($event,index) {
         this.isActive = index;
         .....(还有其他我自己的代码这里可以忽略)

以上代码我单独放在一个jsp里可以运行出我想要的效果，可是在原本的项目里总是失效的，经过多次测试后，发现是我在css里对上面a标签样式设计有冲突。

.assort ul li a{
    text-decoration: none;
    background-color: transparent;
    cursor: pointer;
    color: black;  //就是这里出的问题，把这个删掉我的效果就好了
}

为了让我字体颜色和之前保持不变，我在外面单独设置了

a{color:black; }

我也是误打误撞修复了bug，但具体原因还是弄不明白，如果刚好你也懂，就请多多指教。