vue 从后台获取的数据多层循环渲染在页面上，点击某个值给相应的值添加背景颜色

Question

问题：
1.设置页面一进来所有的值是未选中的（背景颜色为灰色）

2.当用户点击A下列表里的第一项（阿克）时，发现b下列表里的第一项（保山机场）也被添加了相应的背景颜色了，如何避免这种情况出现呢？

相应的代码（这个链接里有相关的代码）
https://jsfiddle.net/xiyanzi/...

路过的大神们进来瞧瞧呗

Answer 1

顺便传入letter，利用letter再做下判断即可
https://jsfiddle.net/fo608vy5/

Answer 2

你所有循环都以同一个index作为标识判断肯定是不行的，index就是1~N的数字，这样写肯定会出现重复的情况。
你代码可以直接用数组的值作为标识

 <span
     v-for="(j, index2) in i.data"
     :key="j"
     :class="{'active': tabIndex == j}"
     @click="select(j)">
  {{ j }}
</span>

当然如果各循环的缓存对象不一样用index也是可行的，但这样变成多选效果可能不是你要的
在你代码上添加多键缓存