selecting select 列表中的选项时如何触发 Vue 事件

Question

JSFiddle：https://jsfiddle.net/qc7yqvvs/

当我使用鼠标单击某个选项时它可以工作，但是如果我使用箭头键浏览选项它不会更新 multiplier。该指南只有 :click 事件，我尝试使用 :select、:enter 和其他事件，但它们似乎不存在。

Answer 1

您可能正在寻找的事件是 v-on:change 或 shorthand：@change。然后，您将在 select 而不是选项上进行设置。

然而，您可能会发现通过将乘数更改为一个对象然后使用间隔值 select 相应的值，即

来更容易做到这一点

编辑

根据您的评论，我发现在组件内构建对象可能很棘手，因此您宁愿在 html 中设置它们。为此，请尝试绑定每个选项的值，然后在 v-model 上设置一个对象，即

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>

selecting select 列表中的选项时如何触发 Vue 事件

How to trigger Vue event when selecting an option from select list

html

javascript

vue.js

vue-component