如何使用vue将对象传递给select中的方法？答案

【问题标题】：How to pass object to method in select using vue?如何使用vue将对象传递给select中的方法？
【发布时间】：2017-10-02 07:32:45
【问题描述】：

请检查以下代码。

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

【问题讨论】：

要获得确切的解决方案，请提供现场演示/小提琴？

标签： javascript laravel vue.js

【解决方案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>

【讨论】：

【解决方案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。

在不知道您的问题的情况下，尽量避免使用事件处理程序。您通常可以使用响应式管道定义您想要的内容，并且您的代码会更短且更具表现力。

【讨论】：