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)之类的内容，但在undefined方法中获得了onTimeSlotClick。

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

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

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

如何使用vue将对象传递给select方法？

2 个答案: