Vue.jsのV-forループでイベントを処理する動的に作成されたボタン

Question

v-forループがあり、反復ごとにボタンが作成されます。ボタンをクリックするとボタンの色が切り替わるトグルハンドラを作成しようとしています。ボタンが動的に作成されているのでしかし、その色のすべてが変化している....

<div class="pets" v-for="pet in pets" :key="pet.id"> 
    <button class="favorite" v-on:click="toggle"> 
     <i v-bind:class="[{ 'red' : favorited }, 'material-icons']">favorite</i> 
    </button>   
</div> 

ペット配列は、HTTP呼び出しで満たされています。

<script> 
export default { 
    name: 'home', 
    data() { 
     return { 
      pets: [], 
      favorited: false 
     } 
    }, 
    methods: { 
     toggle: function() { 
      this.favorited = !this.favorited; 
     } 
    }, 
} 

スタイルタグはちょうど私があなたを切り替えることができますお気に入りボタンを作成しようとしている、色基本的に

<style scoped> 
.red { 
    color: red; 
} 

を変更します。私のスクリプトは次のようになります配列ペットからのオブジェクトを好む。なぜ私の方法は私のすべてのボタンをアクティブにするのか知っています。お気に入りは、ボタンやデータからの固有のものではないためです。したがって、favorited = trueの場合、クラス 'red'はすべてのボタンにバインドされます。私の質問は、私がクリックするだけのクラスに 'red'クラスをバインドする方法です。私はVueには比較的新しいです。これは私を馬鹿にしています！誰かが私にこれを解決する方法を教えてください。

Answer 1

ペットの配列のペットオブジェクトにお気に入りのプロパティを追加します。その後、そのプロパティを使用します。

<div class="pets" v-for="pet in pets" :key="pet.id"> 
    <button class="favorite" v-on:click="pet.favorited = !pet.favorited"> 
     <i v-bind:class="[{ 'red' : pet.favorited }, 'material-icons']">favorite</i> 
    </button>   
</div> 

Example。

ペットオブジェクトを変更しない場合は、here is an alternate wayです。