0

In my Vue template I have the following, 

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

When the checkboxes I wanting to dispatch an action, that sends a PUT request to a URL like,

/api/listing/{id} the {id} is the id of the listing, but I cant figure out how I can get the ID of the listing from the checkbox change event? Is this possible?

Tibebes. M
  • 6,940
  • 5
  • 15
  • 36
Udders
  • 6,914
  • 24
  • 102
  • 194

1 Answers1

1

Just add the parameter to your handler:

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

Here’s a good summary: pass parameter on v-on

János Veres
  • 187
  • 1
  • 7