问题描述
如下图一所示循环了三个div,且每个div中又分辨循环了多个span,给span绑定了点击事件，当点击时其他div里面的class.on也会跟着点击的那个移动，如图二所示。
图一
图二
代码
.little_box {overflow: hidden;display: flex;flex-direction: row;}.little_box span{padding:4px 10px;display: inline-block;text-align: center;border-radius: 6px;color: #333;cursor: pointer;margin-bottom: 10px;margin-right: 15px;background: #e5e5e5;}.little_box span.on{background: #6181ff;color: #ffffff;}
<div style="width: 500px;" id="app" ><form id="form01"><div v-for="(value,i) in listData"><p align="left" style="font-weight: bold">{{value.title}}<span>*</span></p><div class="form-select"><div class="little_box" ><span v-for="(subitem,j) in value.list":class="{on:j===indexes}"@click="tap($event,i,j) ">{{subitem.subTitle}}</span></div></div></div></form></div>
let listData = [{title:'学历',list:[{subTitle:'全日制本科'},{subTitle:'函授本科'},{subTitle:'自考本科'},{subTitle:'成教本科'},{subTitle:'电大本科'},{subTitle:'研究生及以上'}]},{title:'所学专业',list:[{subTitle:'计算机相关'},{subTitle:'法学相关'},{subTitle:'金融相关'}]},{title:'目前从事工作',list:[{subTitle:'公、检、法、律师'},{subTitle:'其他'}]},]let vm = new Vue({el:'#app',data:{listData,indexes: 0,},methods:{tap(event,i,j){this.indexes = j}}})
解决方法
<div v-for="(value,i) in listData"><p align="left" style="font-weight: bold">{{value.title}}<span>*</span></p><div class="form-select"><div class="little_box" ><span v-for="(subitem,j) in value.list":class="{on:indexes[i]===j}"@click="tap($event,i,j) ">{{subitem.subTitle}}</span></div></div></div> let vm = new Vue({el:'#app',data:{listData,indexes: new Array(listData.length).fill(0),isSelect:false},methods:{tap(event,i,j){this.indexes[i]=j;this.$forceUpdate()}}})
