Vue → How to send multiple parameters to :on-change event on a v-select component

Tony Mucci
Oct 2 · 2 min read

TL;DR

Override your method with $event, and then add your parameters after that

INTRO

So if you are like me, you tend to forget some of the litter nuances of frameworks. Especially if you’re writing a multiple languages. In 5 minutes, you might touch python for your backend, PHP for your website, view for your front end, and then be knee-deep in MySQL queries.

As I was working on a piece of one of my Vue Components, I was trying to get an :on-click event to handle multiple parameters. However, for some reason I could only get the value paraments of the <v-select> to appear in one of my methods that I was calling on the event. I need to send multiple parameters to this method so I could update some data on MySQL.

THE REASON I COULDN’T SEND MORE THAN ONE PARAMETER

The reason I couldn’t send more than one parameter was because the way that Vue defaults to sending the data on a event emit. It simply sends an “Any” type to Vue Event bus and <v-select> is built to only show the changed, or updated, value from the <v-select>.

So I would send something similar to this:

on the UpdateMe method:

I would get:

THE SOLUTION

The way to send multiple parameters is a follows

In Vue, the $event is a special variable that houses the information on a Vue Event. Since putting more than one parameter overrides the <v-select>’s event method declaration, we are essentially still overriding the event method, but encasing the event information in the $event variable.

So essentially, we are able to have our cake AND eat it too.

With this new way of packaging the event data and sending our additional parameters, we would now see

will output:

Hope this helps you save sometime. I know it drove me nuts for a couple hours, but now I won’t forget it, and neither will you! :)

Happy Coding!

Code Kings

Programming tips & tricks from professionals

Tony Mucci

Written by

Founder of My Company Tools • Co-Founder of Dree • Co-Founder of Eklect Enterprises. Opinions on this blog are my own.

Code Kings

Programming tips & tricks from professionals

Tony Mucci

Written by

Founder of My Company Tools • Co-Founder of Dree • Co-Founder of Eklect Enterprises. Opinions on this blog are my own.

Code Kings

Programming tips & tricks from professionals

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store