How to trigger function in Vue when dropdown option selected

Question

I want a function to be called using Vue when a user selects an option from a dropdown list. I've started with a really simple example, but i can't seem to get it to work. I have no console errors or errors highlighted in WebStorm, so i'm unsure where i'm going wrong.

Here's my code:

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

tony19 · Accepted Answer · 2022-07-16 01:18:16Z

1

If you're listening for a native DOM event (one that is emitted by a regular HTML element, such as a select element, not a Vue component), you'll need to use the .native modifier ..

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

edited Jul 16, 2022 at 1:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 13, 2018 at 18:08

Husam Elbashir

7,1953 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2953989 Over a year ago

Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.

Husam Elbashir Over a year ago

@user3005003 It should work if the HTML element emitting the change event is the root element of your component. If not you'll need to use v-on="$listeners" on that element. You can read up on that here.

Husam Elbashir Over a year ago

@user3005003 Another option would be to $emit a custom change event by your select element like this <select @change="$emit('change')" ...>.

Collectives™ on Stack Overflow

How to trigger function in Vue when dropdown option selected

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related