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

Question

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?

Mihai Alexandru-Ionut · Accepted Answer · 2019-01-07 10:56:50Z

4

Just pass the room.id as parameter.

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

answered Jan 7, 2019 at 10:56

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Desiigner Over a year ago

Yes, this is exactly what I've been looking for! I'll be able to accept this answer in 8 minutes.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related