クリックイベントを選択したものに対応させるにはどうすればよいですか？

Question

私は【選択クラスがyellow.my問題は、私はクリックをすれば、すべての反復ボックスは、黄色にない だけ選択された1つを を回すだろうということです に選択ボックス を有効にしてください「チェック」という名前のクラスを作成しました。

<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とクリックした行との間には何らかの関係が必要です。

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

とクラスを適用するための条件を変更：たとえばcheckedは、インデックスまたはより良いそうのような最後のクリックされたアイテムのidに等しいこと聞かせて

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