Override your method with $event, and then add your parameters after that
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:
# Say X = Hello and Y = World
#We will assume that the string "Hello" is from the @change even on the v-select.<v-select @update="updateMe(x,y)"></v-select>
on the UpdateMe method:
I would get:
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
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! :)