Vue使用v-for遍历出数据后，某些功能的实现，希望给点帮助或想法。

Question

//attr数据

"attr":[

    {

    "attrName":"颜色",

    "attrList":[{"attrVal":"紫色"},{"attrVal":"红色"}]

    },

    {

    "attrName":"型号",

    "attrList":[{"attrVal":"大号"},{"attrVal":"中号"},{"attrVal":"小号"}]

    }

],

//v-for的实现

<div class="pro-attr">

    <div class="pro-attr-list" v-for="item in numData.attr">

    <h2>{{item.attrName}}</h2>

    <ul>

        <li v-for="listName in item.attrList" :class="{active:listName.attrVal==actAttr}" @click="actAttrFlag(listName.attrVal)">{{listName.attrVal}}</li>

    </ul>

    </div>

</div>

渲染出来的结果

问题：

因为属性没有确定有多少个，所以只能循环出来 ，这样做出来的结果是不管是颜色和型号的所有选项中只能一个被选中，而我想要的结果是，颜色可以有一个被选中，型号也有一个可以被选中，我应该怎么改，或者有思路提供下也行，谢谢。

Answer 1

直接上代码咯，其实选好被选中属性的数据结构一样可以解决问题<div class="container">&nbsp; <div v-for="(item, key) in attr">&nbsp; &nbsp; <h2>{{item.attrName}}</h2>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li v-for="attrItem of item.attrList" v-bind:class="{active: actAttr[key].value == attrItem.attrVal}" @click="selectItem(key, attrItem.attrVal)">&nbsp; &nbsp; &nbsp; &nbsp; {{attrItem.attrVal}}&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div>&nbsp;</div></template><script type="text/javascript">export default {&nbsp; data () {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; actAttr: [{&nbsp; &nbsp; &nbsp; &nbsp; attrName: '颜色',&nbsp; &nbsp; &nbsp; &nbsp; value: '红色'&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; attrName: '型号',&nbsp; &nbsp; &nbsp; &nbsp; value: '中号'&nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; attr: [{&nbsp; &nbsp; &nbsp; &nbsp; attrName: '颜色',&nbsp; &nbsp; &nbsp; &nbsp; attrList: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attrVal: '紫色'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attrVal: '红色'&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; attrName: '型号',&nbsp; &nbsp; &nbsp; &nbsp; attrList: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attrVal: '大号'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attrVal: '中号'&nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attrVal: '小号'&nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; selectItem (key, val) {&nbsp; &nbsp; &nbsp; console.log(val)&nbsp; &nbsp; &nbsp; this.actAttr.splice(key, 1, {&nbsp; &nbsp; &nbsp; &nbsp; attrName: this.attr[key].attrName,&nbsp; &nbsp; &nbsp; &nbsp; value: val&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; console.log(this.actAttr[key])&nbsp; &nbsp; }&nbsp; }}</script><style type="text/css">.container {&nbsp; text-align: left;}.active {&nbsp; color: red;}</style>