时间戳

首页 > 解决方案 > 选择下拉选项时如何在Vue中触发功能

javascript - 选择下拉选项时如何在Vue中触发功能

问题描述

当用户从下拉列表中选择一个选项时，我希望使用 Vue 调用一个函数。我从一个非常简单的例子开始，但我似乎无法让它工作。我没有在 WebStorm 中突出显示控制台错误或错误，所以我不确定我哪里出错了。

这是我的代码：

<template>
    <b-container>
        <b-row>
            <b-col>
                <div>
                    <b-dropdown id="ddown4" text="Product Type" class="m-md-2" v-on:change="FilterProduct">
                        <b-dropdown-item>4.5</b-dropdown-item>
                        <b-dropdown-item>10.5</b-dropdown-item>
                    </b-dropdown>
                </div>
            </b-col>
        </b-row>
    </b-container>
</template>

<script>

    export default {
        name: 'ProductFilters',
        methods:{
            FilterProduct(){
                alert('Yes!');
            }

        },
        data() {
            return {
            }
        }
    }
</script>

标签： javascriptvue.js

解决方案

如果您正在侦听本机 DOM 事件（由常规 HTML 元素发出的事件，例如select元素，而不是 Vue 组件），则需要使用.native 修饰符..

<b-dropdown id="ddown4" text="Product Type" class="m-md-2" v-on:change.native="FilterProduct">

推荐阅读