Passing separate data through a select box change event, Vue

I have a working select box that is sending the selected value to a method on the change event but I have a question with this:

Say I want to send the cat_id value at the time of selection as well (so that I could build an object that relates the cat_id and date within the called method) is there a way to send that cat_id, or any other data, along in that select box change event?

var vm = 
new Vue({
  el: "#app",
  props: { 

  data: {
    testing_dates:['2021-11-29', '2021-11-30'],
    cat_id: [123]
  methods: {
<script src=""></script>
<div id="app">
<li>Category ID: {{ cat_id }}</li>
<li style="list-style: none;">
  <select style="width: auto;" @change="testChange($event)">
     <option selected disabled>Options</option>
     <option v-for="date in testing_dates" :value="date">{{ date }}</option>

>Solution :

You can pass another parameter:

@change="testChange($event, cat_id)"
testChange(event, catId){
  console.log(, catId);

Or access it inside the function:

  console.log(, this.cat_id);

Leave a Reply