v-for嵌套渲染实现点击变色

Question

数组结构如下

attribute: [
      {
        "name": "颜色",
        "value": [
          "黑色",
          "白色",
          "绿色",
          "蓝色"
        ]
      },
      {
        "name": "尺码",
        "value": [
          "L",
          "XL",
          "XXL"
        ]
      }
    ],

html 内容如下

    <div class="attribute" v-for='(item1,y) in attribute' :key='y'>
          <p>{{item1.name}}</p>
           <div class="attribute-box" >
             <span v-for='(a,z) in item1.value' :key='z' @click='one()'>{{a}}</span>
           </div>
        </div>

现在想要实现的效果是点击颜色一栏实现当前选中的点击变色，
选中尺码一栏的话也是点击当前的点击变色
并且点击其中一个的时候保留另外一个数组的选中效果

如果是一个数组的话我们可以使用

<span v-for='(item,x) in list' :key='x' @click='change(x)' :class="active == x ? 'red' : '' "></span>

根据索引值来实现点击当前的改变颜色

但是现在的话

attribute

这个数组是从后端传过来的，我们并不能保证里面只有 颜色以及尺码两个选项，但是想要用一个click效果来实现目的，

自己尝试让最外层的

attribute

这个class 使用动态生成的方式，这样有几个数组就会按照attribute0，attribute1，排列下去，再使用事件委托来获得最外层class下面的class,这样来更改属性，但这样一来难免会用到 jquery 。既然使用了vue我们应该尽量避免直接去操作dom元素。

所以请问下大家有什么好的实现方案？

Answer 1

一个数组能传参数，多个数组就传不了了吗？没明白你是哪里实现不了

---

active:{}

    <div class="attribute" v-for='(item1,y) in attribute' :key='y'>
          <p>{{item1.name}}</p>
           <div class="attribute-box" >
             <span v-for='(a,z) in item1.value' :key='z' @click='one(item1.name,a)' :class="active[item.name] == a ? 'red' : '' ">{{a}}</span>
           </div>
        </div>

one:function(name,value){
    this.$set(this.active,name,value);
}

好好补下基础，我回答你问题得脑补你的问题到底是什么