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.

Have you tried using a function argument? @submit.prevent="deleteDeck(deck)" + deleteDeck(deck) { /*use deck*/ }? — juzraai
– juzraai, Commented Dec 12, 2019 at 20:56

Matt U · Accepted Answer · 2019-12-12 21:00:42Z

3

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)
  }
}

answered Dec 12, 2019 at 21:00

Matt U

5,12811 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

juzraai · Accepted Answer · 2019-12-12 21:01:02Z

1

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 */
    }
}

answered Dec 12, 2019 at 21:01

juzraai

5,9798 gold badges36 silver badges49 bronze badges

Comments

Léo Martin · Accepted Answer · 2019-12-12 21:01:05Z

1

You must pass deck as an argument of deleteDeck :

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

answered Dec 12, 2019 at 21:01

Léo Martin

7467 silver badges13 bronze badges

Comments

Gander · Accepted Answer · 2019-12-12 21:18:53Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related