CODEWITHSUNDEEP
javascriptvue.js
Udders
Udders

Reputation: 6986

vue send data to server on checkbox change

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?

Upvotes: 0

Views: 911

Answers (1)

J&#225;nos Veres
J&#225;nos Veres

Reputation: 199

Just add the parameter to your handler:

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

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

Upvotes: 2

Related Questions