Vue v data data class= "{data}" > {data} > class= "{house}"

the menswear below will also change when you click.

            <li v-for="(item,index) in items">
              <div class="screnn-classify" @click="map(item,index)">
                

{{item.name}}

<p > <svg class="icon" :class="{active: item.visible}" aria-hidden="true"> <use xlink:href="-sharpicon-right"></use> </svg>

</div> <div v-show="item.visible" class="structure"> <span v-for="(data,indexs) in item.datas" @click="addClass(indexs)" v-bind:class="{ activation:indexs==current}">{{data}}</span> </div> </li>

here is js

           current:"0",
           
           addClass:function(indexs){
                this.current = indexs;
              }

screenshot of the question:

clipboard.png

Mar.22,2021

all the attributes of your women's wear and men's wear are bound to the same event handler, which is fine, but the two states are obviously different, so you need to save them with two variables. Add another field to the item object, eg: value , and store a single attribute data when clicked. Finally, compare key= index class= "{activation:data==item.value}" , and you can


< li "answer" = "(item,index) in items": key= "index" >


).
<div v-show="item.visible" class="structure">
    <span v-for="(data,indexs) in item.datas"
      @click="addClass(indexs)"
      v-bind:class="{ activation:indexs==current}">{{data}}</span>
</div>

this piece is written as a component current addClass and put the item.datas in the new component

Menu