如何使用Vue在選擇中將對象傳遞給方法？

Question

請檢查以下代碼。

  <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>

我想將slot對象傳遞給onTimeSlotClick方法。 我怎樣才能做到這一點？ 我嘗試了類似onTimeSlotClick(slot)但是在onTimeSlotClick方法中變得undefined 。

Answer 1

使用v-model選擇標簽並將值設置為對象

 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

在選擇項上嘗試使用v-model屬性。 所以...

<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>

您可以像示例中那樣顯式地傳遞selected內容，也可以僅使用onclick作為觸發器，並從Vue中定義的任何位置讀取selected 。

不知道您的問題，嘗試避免事件處理程序。 您通常可以使用反應式管道來定義所需的內容，並且代碼將更短且更具表現力。