title: Event handling dynamic created buttons in Vue.js v-for loop
body: <p>I have a v-for loop where a button is created for each iteration. I'm trying to make a toggle handler where clicking the button will toggle the color of the button. But since the buttons are dynamically created, all of their colors are changing .... </p>
  
  <pre><code>&lt;div class="pets" v-for="pet in pets" :key="pet.id"&gt;
      &lt;button class="favorite" v-on:click="toggle"&gt;
          &lt;i v-bind:class="[{ 'red' : favorited }, 'material-icons']"&gt;favorite&lt;/i&gt;
      &lt;/button&gt;           
  &lt;/div&gt;
  </code></pre>
  
  <p>The pets array is being filled with a http call. My script looks like this:</p>
  
  <pre><code>&lt;script&gt;
  export default {
      name: 'home',
      data() {
          return {
              pets: [],
              favorited: false
          }
      },
      methods: {
          toggle: function() {
              this.favorited = !this.favorited;
          }
      },
  }
  </code></pre>
  
  <p></p>
  
  <p>The Style tag just changes the color</p>
  
  <pre><code>&lt;style scoped&gt;
  .red {
      color: red;
  }
  </code></pre>
  
  <p></p>
  
  <p>Essentially, I'm trying to created a favorite button where you can toggle favoriting an object from the array pets. I know why my method would activate all my buttons. Since favorited is not unique to a button and coming from the data. So when favorited = true, the class 'red' is bound to all my buttons. My question is how do I bind the class 'red' to just the button I click on? I'm relatively new to Vue and this is driving me nuts lol! Someone please tell me how I can fix this.</p>