vue v-bind:class="{ activation:indexs==current}">{{data}}

Question

点击的时候下面的男装也会跟着变化。

            <li v-for="(item,index) in items">
              <div class="screnn-classify" @click="map(item,index)">
                <p>{{item.name}}</p>
                <p >
                  <svg class="icon" :class="{active: item.visible}" aria-hidden="true">
                    <use xlink:href="#icon-right"></use>
                  </svg>
                </p>
              </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>
            

下面是js

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

问题截图：

Answer 1

你的女装、男装所有的属性都绑定为同一个事件处理函数，这没啥，但是两个状态明显不一样，所以要两个变量来保存，在item对象上再添加一个字段，eg：value，点击的时候把单个属性data存进去，最后比较v-bind:class="{ activation:data==item.value}",就可以了

Answer 2

<li v-for="(item,index) in items" :key="index">

Answer 3

<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>

这块写成组件 current addClass 放在新的组件中 把item.datas 传进去