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

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">&nbsp; &nbsp; <span v-for="(data,indexs) in item.datas"&nbsp; &nbsp; &nbsp; @click="addClass(indexs)"&nbsp; &nbsp; &nbsp; v-bind:class="{ activation:indexs==current}">{{data}}</span></div>这块写成组件 current addClass 放在新的组件中 把item.datas 传进去