在v-for循环中访问元素的数据（Vue.js）

Question

我有一些数据传递到html表：

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

我从API获取此数据。 我有一个函数joinChatSession ，所以我的问题是，如何将这个room.id传递给这个函数？ 我正在努力解决这个问题，因为我不知道如何访问我桌子上每个房间的room.id.

我的功能看起来像这样：

$.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)
      }
    })

所以我需要通过我的room.id而不是$ {uri}，我该如何访问它？

Answer 1

只需传递room.id作为参数。

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