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

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

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

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

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

回答
編輯回答
別硬撐

你可以這樣：

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

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

2017年1月25日 12:43