如何從 vue.js 中的循環項目中獲取 id？

Question

我有一個這樣的循環：

<div class="jokes" v-for="joke in jokes">
  <strong>{{joke.body}}</strong>
  <small>{{joke.upvotes}}</small>
  <button v-on:click="upvote"><i class="fa fa-arrow-down"></i></button>
<div>

我需要獲得joke.id以便我可以將其發布到后端並增加投票。

該方法應該是這樣的：

 methods: {
        upvote: function(e) {
            axios.post( this.BASE_URL + "/api/joke/" + this.joke.id + "/upvote", {
                token: 'secret',
            }).then(function(data){
                console.log(data);
            });
        }
     },

我怎樣才能做到這一點？

Answer 1

在點擊中傳遞joke 。

<button v-on:click="upvote(joke)"><i class="fa fa-arrow-down"></i></button>

在方法中使用它。

upvote: function(joke) {
  axios.post( this.BASE_URL + "/api/joke/" + joke.id + "/upvote", {
    token: 'secret',
  }).then(function(data){
    console.log(data);
  });
}

Answer 2

在您的v-on:click事件中傳遞joke對象： <button v-on:click="upvote(joke)">

您可能還需要像這樣鍵入循環：

<div class="jokes" v-for="joke in jokes" :key="joke.id">

Answer 3

v-on指令的值不僅可以是句柄方法名稱，還可以是內聯語句。 因此，您只需要像以下方式一樣為該方法添加一個參數。

<div class="jokes" v-for="joke in jokes">
  <strong>{{joke.body}}</strong>
  <small>{{joke.upvotes}}</small>
  <button v-on:click="upvote(joke.id)"><i class="fa fa-arrow-down"></i></button>
<div>

然后方法可以獲取id。

methods: {
  upvote: function(id) {
    axios.post(this.BASE_URL + "/api/joke/" + id + "/upvote", {
      token: 'secret',
    }).then(function(data) {
      console.log(data);
    });
  }
},

您可以從 Vue 的 API 文檔中了解更多信息