title: Accessing v-for list item object data in vue.js
body: <pre><code>&lt;div v-for="deck in decks" :key="deck._id" slot="content"&gt;
    &lt;div class="level"&gt;
      &lt;div class="level-left"&gt;
        &lt;div&gt;
          &lt;p&gt;{{ deck._id }}&lt;/p&gt;
          &lt;p class="has-text-weight-semibold"&gt;{{ deck.title }}&lt;/p&gt;
          &lt;p&gt;Boards: {{ deck.board1 }}&lt;/p&gt;
          &lt;p&gt;Primary color: {{ deck.board1Color }}&lt;/p&gt;
          &lt;p&gt;
            L/W/H: {{ deck.deckLength }}ft, {{ deck.deckWidth }}ft,
            {{ deck.deckHeight }}ft
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="level-right"&gt;
        &lt;form @submit.prevent="deleteDeck"&gt;
          &lt;button type="submit" class="button"&gt;Delete&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm able to access this object's id within the v-for loop, but not in the method called by the delete button.</p>
  
  <pre><code>methods: {
      deleteDeck() {
        const deckId = this.deck._id;
        alert(deckId);
      }
  }
  </code></pre>
  
  <p>The id of this individual deck will be passed into an axios delete request, but for now I'm just trying to figure out how to access it. this.id contains the id from the greater object that this object belongs to.</p>