如何使用Vue在选择中将对象传递给方法？

Question

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 1

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> 

Answer 2

Try a v-model attribute on the select. So...

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

You can either pass selected explicitly, like in the example, or just use the onclick as a trigger, and read selected from wherever you defined it in your Vue.

Without knowing your problem, try to avoid event handlers. You can often define what you want with reactive pipes, and your code will be shorter and more expressive.