在 vue.js 中访问 v-for 列表项对象数据答案

【问题标题】：Accessing v-for list item object data in vue.js在 vue.js 中访问 v-for 列表项对象数据
【发布时间】：2020-04-06 07:33:38
【问题描述】：

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

我可以在 v-for 循环中访问该对象的 id，但不能在删除按钮调用的方法中访问。

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

这个单独的卡片组的 id 将被传递到 axios 删除请求中，但现在我只是想弄清楚如何访问它。 this.id 包含此对象所属的更大对象的 id。

【问题讨论】：

您是否尝试过使用函数参数？ @submit.prevent="deleteDeck(deck)" + deleteDeck(deck) { /*use deck*/ }?

标签： javascript vue.js frontend vue-component

【解决方案1】：

您所要做的就是将id 传递给模板中的方法：

模板 HTML

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

组件

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

【讨论】：

【解决方案2】：

我会在函数参数中传递对象。

在模板中：

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

在methods:

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

【讨论】：

【解决方案3】：

您必须将deck 作为deleteDeck 的参数传递：

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

【讨论】：

【解决方案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>

【讨论】：