如何使用vue双重循环绑定事件？

Question

如下代码，数据对象中的键值对个数不定，键值对中的数组长度不定。
当使用vue双重循环绑定事件的时候， 由于所有元素都被绑定了统一事件，所以点击任何一个元素都会触发其他元素的事件，并且会有多个相同的索引值 。

<template>
    <div>
        <ul v-for="parent in obj">
            <li :class="{'active': activeFlag===index}" v-for="(child,index) in parent" @click="Identify(index)">{{child}}</li>
        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return{
                obj:{
                    1: [1,2,3,4,...,100],
                    2: [1,2,3,4,...],
                    ... ...
                    n: ["a","b","c",...,"n"]
                }，
                activeFlag: null,
            }
        },
        methods:{
            Identify(i){
                this.activeFlag = i;
            }
        }
    }
</script>

请问我该如何绑定事件，仅选中当前被点击元素，且可以多选元素？
谢谢回答。

Answer 1

你可以这样：

<ul v-for="(parent,i) in obj">
   <li v-for="(child,index) in parent" @click="Identify(i,index)">{{child}}</li>
</ul>

取值：

Identify(i,index){
   console.log(i);
   console.log(index);
}

这样你就拥有两个索引，做你任何你想做的事情啦。

Answer 2

parent[i]