請教一下，我目前寫了一段nested v-for
其中cmdlist是一個Object 內裝Array的資料結構
如： { a: [1,2,3], b: [3,4,5], c: [5,6,7], d: [7,8,9] }
想在HTML呈現如下表示：
a
1
2
3
b
3
4
5
c
5
6
7
d
7
8
9
<li v-for="(item_list, key, index) in cmdlist" v-on:click="toggle(index)">
{{key}}
<ul v-if="boxes[index].show" v-for="item in item_list">
<li>{{item}}</li>
</ul>
</li>
在HTML頁面上呈現出的結果是對的，不過錯誤的是v-on:click的地方
我預期v-on:click的作用範圍只有在第一層<li> tag的部分
結果連第二層的<li> tag也受到影響
想請教這部分應該如何進行修正？ 還望先進指點，感謝

{{key}}這行加個標籤 再將 v-on:click 放在這標籤中呢?

加標籤是指用div再包一層嗎? 我這樣試過，結果一樣不好意思，剛剛改錯，照i大的說法是可以的可是我還是不明白v-on的作用，可否指點一二？或是可以提點一下keyword怎麼找，我目前google不到跟我一樣的狀況這個問題跟Vue無關，剛剛試了純HTML就會有這問題因為是我對HTML的運作有誤解，先謝謝i大

感覺跟event bubbling有關