想用vue实现商品规格的颜色排他，想要三三对应排他

Question

后台对象是这样的

我想实现这种效果，这是用jquery事件监听写出来的
但是 在vue是显示 所有个span进行排他，只能实现如下效果
代码如图
想了好久 没想出一个好的方法，求大神帮忙

目前是这样的
但效果是这样的，可以实现多选 但没有实现排他

Answer 1

两种方案：
（1）你重新组装后台返回的数据，组装成：
内存：[{name: '8G', active: false}, {name: '16G', active: false}, ....]
的形式。
然后@click="changeItem(items, k)"; 方法：changeItem(items, item) { 前面要循环items, 去掉active；item.active = !item.active }

---

（2）定义三个变量，分别是selected内存， selected颜色， selected屏幕，
然后@click="selectItem(index, k)"; 方法： selectItem(key, item) { if (key === '内存') { selected内存 = item;} else if...... }
修改:class="{active: (index === '内存' && k === selected内存) || (index === '颜色' && k === selected颜色) || ....}"

做好用第一种方法