Vue------循环多个ul与li,给li增加点击事件增加class不影响其他的li

问题描述 

如下图一所示循环了三个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()
                }
            }
        })