我該如何使點擊事件對應於所選的？

Question

我創建了一個名爲「check」的類。該類應該將所選框 改爲 yellow.my的問題是，如果我點擊，所有迭代框將會變爲黃色而不是 ，而不是 只有選定的一個。

<template> 
    <div> 
    <!--iterated object--> 
    <div class="main" v-for="rr,index in object"> 
     <p class="paragraph">{{rr.genre}}</p> 
     <!-- check box iterated with the object--> 
     <div :class="{'checkBox':true, check:checked}" @click="work(index)"></div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     data() { 
     return { 
      object:[], 
      checked:false 
     } 
     , mounted() { 
     axios.get("/maria") 
     .then(response => this.object = response.data); 
     }, 
     methods: { 
       work(index) { 
       this.checked=!this.checked 
      } 
     } 
    } 
</script> 

Answer 1

checked和點擊行之間必定存在某種關係。例如，讓checked等於指數甚至更好，最後單擊項目的id像這樣：

methods: { 
     work(index) { 
      this.checked = index 
     } 
    } 

並修改條件應用類：

<div :class="{'checkBox':true, check: checked == index}" @click="work(index)"></div>