Accessing v-for list item object data in vue.js

Question

<div v-for="deck in decks" :key="deck._id" slot="content">
  <div class="level">
    <div class="level-left">
      <div>
        <p>{{ deck._id }}</p>
        <p class="has-text-weight-semibold">{{ deck.title }}</p>
        <p>Boards: {{ deck.board1 }}</p>
        <p>Primary color: {{ deck.board1Color }}</p>
        <p>
          L/W/H: {{ deck.deckLength }}ft, {{ deck.deckWidth }}ft,
          {{ deck.deckHeight }}ft
        </p>
      </div>
    </div>
    <div class="level-right">
      <form @submit.prevent="deleteDeck">
        <button type="submit" class="button">Delete</button>
      </form>
    </div>
  </div>

  <br />
</div>

I'm able to access this object's id within the v-for loop, but not in the method called by the delete button.

methods: {
    deleteDeck() {
      const deckId = this.deck._id;
      alert(deckId);
    }
}

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.

Answer 1

All you have to do is pass the id to the method from the template:

Template HTML

...
<form @submit.prevent="deleteDeck(deck.id)">
  <button type="submit" class="button">Delete</button>
</form>

Component

methods: {
  deleteDeck (id) {
    alert(id)
  }
}

Answer 2

I would pass the object in a function argument.

In the template:

<div v-for="deck in decks" :key="deck._id" slot="content">
    ...
    <form @submit.prevent="deleteDeck(deck)">...</form>
    ...
</div>

And in methods :

methods: {
    deleteDeck(deck) {
      /* use deck here */
    }
}

Answer 3

You must pass deck as an argument of deleteDeck :

<form @submit.prevent="deleteDeck(deck)">
  <button type="submit" class="button">Delete</button>
</form>

Answer 4

 Vue.config.productionTip = false; new Vue({ data() { return { decks: [ {_id: 1,title: "Foo"}, {_id: 2,title: "Bar"} ] }; }, methods: { deleteDeck(id) { this.decks = this.decks.filter(deck => deck._id !== id); } } }).$mount("#app");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="deck in decks" :key="deck._id" slot="content"> <div class="level"> <div class="level-left"> <div> <p>{{ deck._id }}</p> <p class="has-text-weight-semibold">{{ deck.title }}</p> </div> </div> <div class="level-right"> <button @click="deleteDeck(deck._id)" class="button">Delete</button> </div> </div> </div> </div>