CODEWITHSUNDEEP
javascriptvue.js
Desiigner
Desiigner

Reputation: 2336

Access an element's data in a v-for loop (Vue.js)

I have some data that I'm passing to an html table:

<tr v-for="room in rooms">
      <td>{{room.name}}</td>
      <td>{{room.owner}}</td>
      <td>{{room.id}}</td>
      <td><button @click="joinChatSession" class="btn btn-primary">Join</button></td>
</tr>

I'm getting this data from an API. And I have a function joinChatSession, so my question is, how to pass this room.id to this function? I'm struggling with this once because I don't know how to access room.id for every room in my table.

My function looks like this:

$.ajax({
      url: `http://localhost:8000/api/rooms/${uri}/`,
      data: {username: this.username},
      type: 'PATCH',
      success: (data) => {
        const user = data.members.find((member) => member.username === this.username)
      }
    })

So I need to pass my room.id instead of this ${uri}, how can I access it?

Upvotes: 3

Views: 222

Answers (1)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48437

Just pass the room.id as parameter.

<td><button @click="joinChatSession(room.id)" class="btn btn-primary">Join</button></td>

Upvotes: 4

Related Questions