vue: class judgment problem, this side made a judgment, but the class effect can not be added, just started to do vue project, really do not understand, the following is the problematic code, leaving only the main part, ask a god to help take a look, crab
< style scoped >
.show _ body dl {border-bottom:1px solid-sharpeee;padding:.2rem 0 witch widthgroup 100%}
.show _ body dl:last-child {border-bottom:1px solid-sharpfff}
.show _ body dl dd {font-size:.35rem;line-height:.65rem}
.show _ body dl dt {padding:.12rem 0}
.show _ body dl dt a {display:inline-block;border:1px solid-sharpccc;font-size:.25rem;padding:.1rem .2rem; margin-right:.15rem; Margin-left:.15rem;border-radius:.1rem}
.show _ body dl dt a.on {border:1px solid-sharpff9500;color:-sharpfff;background:-sharpff9500}
< / style >
< template >
<div class="show_body">
<dl v-for="(specListlist,index) in info">
<dd>{{specListlist.name}}</dd>
<dt>
<a v-for="(list,indexs) in specListlist.normsValues" :class="{on:indexclass[index]==indexs}" @click="listOnclick(index,indexs,list)">{{list.name}}</a>
</dt>
</dl>
</div>
< / template >
< script >
export default {
name:"goodsDetail",
data:function(){
return {
indexclass:[-1,-1,-1,-1,-1],
info:[
{"id": "1", "name": "", "normsKey": 0, "normsValues": [
{"id": 1, "name": "", "normsKey": "NV0"},
{"id": 2, "name": "", "normsKey": "NV1"}
]},
{"id": "2", "name": "", "normsKey": 0, "normsValues": [
{"id": null, "name": "S", "normsKey": "NV0"},
{"id": null, "name": "M", "normsKey": "NV1"},
{"id": null, "name": "L", "normsKey": "NV2"}]
}
]
}
},
methods: {
listOnclick:function(a,b,c){
this.indexclass[a]=b;
console.log(this.indexclass,this.indexclass[a],b);
}
}}
< / script >
tried
: class= "(indexclass [index] = = indexs)? "on":"""
: class= "{" on": index] = = indexs}"
has no effect
this is the online code, https://jsfiddle.net/94dum1gn/