I want to add a click-to-add class function to the li in both Ul. Now the code clicks on the li, in one ul to add the attribute, but the li with the same subscript in another ul also adds this attribute. How should I write so that the two ul do not affect each other?
the code is as follows:
html:
<div v-for="items in goodsstandardele">
<div v-if="items.standarddata[0].url==""" class="species">
<h5>{{items.standardlabel}}</h5>
<span @click="color($index)" :class="{colorDorderRed: $index==colorred}" v-for="(gd,$index) in items.standarddata">{{gd.desc}}</span>
</div>
<div v-else class="goods-color">
<h5>{{items.standardlabel}}</h5>
<ul>
<li @click="color($index)" v-for="(gd,$index) in items.standarddata">
<img :class="{colorDorderRed: $index==colorred}" :src="gd.url" alt="">
{{gd.desc}}
</li>
</ul>
</div>
</div>js Code:
color(index){
this.colorred = index;
}the effect is as follows:
now click on white to jump to 10, blue is 5, no cross-selection is allowed. I don"t understand very well at the beginning of my study. I hope the gods can help me. Thank you!