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: {
    testChange(event){
      console.log(event.target.value);
    },
  },
});
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></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>
  </select>
</li>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can pass another parameter:

@change="testChange($event, cat_id)"

testChange(event, catId){
  console.log(event.target.value, catId);
}

Or access it inside the function:

testChange(event){
  console.log(event.target.value, this.cat_id);
}