选择从选择列表

Question

的jsfiddle一个选项时如何触发事件的Vue：https://jsfiddle.net/qc7yqvvs/

它的工作原理，当我用鼠标点击一个选项，但如果我使用箭头键导航选项也不会更新multiplier。该指南只有:click事件，我尝试:select，:enter和其他人，但他们似乎并不存在。

Answer 1

您可能经过的事件是v-on:change或简写：@change。然后，您将在select上设置此选项，而不是选项。

然而，你可能会发现更容易通过改变倍频到一个对象，然后使用间隔值来选择对应一个做到这一点，即

编辑

按照你的意见我看到在组件中构建对象可能会很棘手，所以你应该将它们设置在html中。要做到这一点尝试结合每个选项的值，然后在V模型设定的对象，而不是，即

Vue.component('my-component', { 
 
    data: function() { 
 
     return { 
 
      value: {}, 
 
     } 
 
    }, 
 
    computed: { 
 
     total: function() { 
 
      return this.value.interval ? (this.value.interval * this.value.multiplier).toFixed(2) : 0 
 
     } 
 
    } 
 
}); 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <my-component inline-template> 
 
     <div> 
 
      <select size="6" v-model="value"> 
 
       <option :value="{ interval: 24, multiplier: 1 }">24</option> 
 
       <option :value="{ interval: 12, multiplier: 0.71 }">12</option> 
 
       <option :value="{ interval: 8, multiplier: 0.56 }">8</option> 
 
       <option :value="{ interval: 4, multiplier: 0.47 }">4</option> 
 
       <option :value="{ interval: 2, multiplier: 0.25 }">2</option> 
 
       <option :value="{ interval: 1, multiplier: 0.12 }">1</option> 
 
      </select> 
 
      <p> 
 
       value: {{ value }} 
 
      </p> 
 
      <p> 
 
       Total: {{ total }} 
 
      </p> 
 
     </div> 
 
    </my-component> 
 
</div>