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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3c47b-2ba7b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3c47b-2ba7b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?