Hitendra Hitendra - 3 years ago 234
Javascript Question

How to pass object to method in select using vue?

Please check the below code.

<tr>
<td>Select Timeslot</td>
<td colspan="2">
<select class="form-control" v-on:change="onTimeSlotClick">
<option v-for="slot of slots">
<label slot.time_from - slot.time_to</label>
</option>
</select>
</td>
</tr>


I want to pass
slot
object to
onTimeSlotClick
method. How can I do that?
I tried something like
onTimeSlotClick(slot)
but getting
undefined
in
onTimeSlotClick
method.

Answer Source

Use v-model for select tag and set value as object

var vm = new Vue({
  el: '#vue-instance',
  data: {
    rows: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
    ],
    item:""
  },
  methods:{
  	  onTimeSlotClick: function(item){
      	console.log(item);
      }

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="vue-instance">
   <select class="form-control" v-model="item" v-on:change="onTimeSlotClick(item)">
         <option value="">Select</option>
        <option v-bind:value="row" v-for="row in rows">
          <label>{{row.name}}</label>
        </option>
      </select>
      <div>{{item | json}}</div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download