解决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，但具体原因还是弄不明白，如果刚好你也懂，就请多多指教。