从选择列表中选择选项时如何触发Vue事件

Posted 2023-02-23

【中文标题】从选择列表中选择选项时如何触发Vue事件

【英文标题】：How to trigger Vue event when selecting an option from select list

【发布时间】：2017-04-10 18:30:04

【问题描述】：

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

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

【参考方案1】：

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

但是，您可能会发现通过将乘数更改为一个对象然后使用间隔值选择相应的值会更容易做到这一点，即

编辑

按照您的 cmets，我发现在组件内构建对象可能很棘手，因此您宁愿将它们设置在 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>

【讨论】：

我正在使用 Laravel 从数据库中获取间隔和相应的乘数。如何使用当前设置创建该对象？

那是一个完全不同的问题，所以如果这回答了你最初的问题，你可以这样标记。但是我假设你有区间和相应的乘数值？如果是这样，您是否可以不只是从它们构建一个对象并在准备好时将其设置为 this.multiplier 的值？

更新答案假设您需要在 html 中设置所有值

这回答了我的问题。但是我现在如何处理表单提交呢？该字段的值很奇怪（value="[object Object]"）。这是怎么调用的，所以我可以查看 Vue 的文档？

你需要 v-bind 的值，我使用了上面的简写，即 :value= 但可以写成：v-bind:value=" ... 这样做会让一切正常，因为你会通过对象，而不是字符串