vue send data to server on checkbox change

Question

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?

János Veres · Accepted Answer · 2020-06-13 09:33:54Z

2

Just add the parameter to your handler:

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

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

answered Jun 13, 2020 at 9:33

János Veres

1991 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

vue send data to server on checkbox change

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related