Javascript vue在复选框更改时向服务器发送数据

在我的Vue模板中，我有以下内容：

<transition-group tag="tbody" name="fade">
    <tr v-for="listing in user.listings" :key="listing.id">
        <td>{{ listing.name | truncate(20) }}</td>
        <td>...</td>
        <td>...</td>
        <td>
            <input type="checkbox" name="active" v-model="listing.active" @change="handleToggleActive" />
        </td>
        <td class="flex direction-row justify-between">
            <button type="button" @click.prevent="handleDelete(listing.id)">Delete</button>
            <router-link :to="`${user.profile.slug}/${listing.slug}/manage`">Edit</router-link>
            <router-link :to="`${user.profile.slug}/${listing.slug}`">View Public</router-link>
        </td>
    </tr>
</transition-group>

当复选框我想要发送一个动作时，它会向一个URL发送一个PUT请求，比如

---

/api/listing/{id}{id}是列表的id，但是我不知道如何从checkbox change事件获取列表的id？这可能吗？

只需将参数添加到处理程序中：

 @change=“handleToggleActive($event, listing.id)”

这里有一个很好的总结：