如何從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指令值不僅可以是一個句柄方法的名稱也是一個inline語句。所以你只需要像下面的方式添加方法的參數。

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

您可以瞭解更多的形式API document of Vue