在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 如何使用vue雙重循環(huán)綁定事件？

如何使用vue雙重循環(huán)綁定事件？

如下代碼，數(shù)據(jù)對象中的鍵值對個數(shù)不定，鍵值對中的數(shù)組長度不定。
當(dāng)使用vue雙重循環(huán)綁定事件的時候， 由于所有元素都被綁定了統(tǒng)一事件，所以點擊任何一個元素都會觸發(fā)其他元素的事件，并且會有多個相同的索引值 。

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

請問我該如何綁定事件，僅選中當(dāng)前被點擊元素，且可以多選元素？
謝謝回答。

回答
編輯回答
別硬撐

你可以這樣：

<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);
}

這樣你就擁有兩個索引，做你任何你想做的事情啦。

2017年1月25日 12:43