vueを使ってselect内のメソッドにオブジェクトを渡す方法は？

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> 

私はonTimeSlotClick方法にslotオブジェクトを渡したいです。どうやってやるの？ 私はonTimeSlotClick(slot)のようなものを試しましたが、onTimeSlotClickの方法でundefinedを得ました。

Answer 1

オブジェクト

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:{ 
 
    \t onTimeSlotClick: function(item){ 
 
     \t 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

selectで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を読むことができます。

問題がわからない場合は、イベントハンドラーを避けてください。反応パイプで必要なものを定義することが多く、コードはより短く表現力豊かになります。