Wie erhalte ich die ID eines Loops in vue.js?

Question

Ich habe eine Schleife wie folgt aus:

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

Ich brauche joke.id zu bekommen, so dass ich es Backend veröffentlichen können und die Stimmen zu erhöhen.

Das Verfahren sollte so etwas wie diese:

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

Wie ich das erreichen kann?

Answer 1

die joke im Klick Pass.

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

Verwenden Sie es in der Methode.

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

Answer 2

In Ihrem v-on:click Ereignisse passieren das joke Objekt: <button v-on:click="upvote(joke)">

Sie auch, wie so Ihre Schleife eingeben müssen:

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

Answer 3

Wert der v-on Richtlinie nicht nur ein Griff Methodenname, sondern auch eine Inline-Anweisung. Sie müssen nur ein Argument für die Methode hinzufügen, wie folgender Weg.

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

Und dann kann die Methode ID erhalten.

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

können Sie mehr Form lernen die API document of Vue