How to trigger function in Vue when dropdown option selected
0
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>
javascript vue.js
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
add a comment |
0
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>
javascript vue.js
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
add a comment |
0
0
0
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>
javascript vue.js
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
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>
javascript vue.js
javascript vue.js
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
asked Nov 13 '18 at 17:35
user3005003user3005003
36521127
36521127
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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">
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@user3005003 It should work if the HTML element emitting thechangeevent is the root element of your component. If not you'll need to usev-on="$listeners"on that element. You can read up on that here.
– Husam Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to$emita customchangeevent by yourselectelement like this<select @change="$emit('change')" ...>.
– Husam Ibrahim
Nov 13 '18 at 19:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286621%2fhow-to-trigger-function-in-vue-when-dropdown-option-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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">
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@user3005003 It should work if the HTML element emitting thechangeevent is the root element of your component. If not you'll need to usev-on="$listeners"on that element. You can read up on that here.
– Husam Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to$emita customchangeevent by yourselectelement like this<select @change="$emit('change')" ...>.
– Husam Ibrahim
Nov 13 '18 at 19:34
add a comment |
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">
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@user3005003 It should work if the HTML element emitting thechangeevent is the root element of your component. If not you'll need to usev-on="$listeners"on that element. You can read up on that here.
– Husam Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to$emita customchangeevent by yourselectelement like this<select @change="$emit('change')" ...>.
– Husam Ibrahim
Nov 13 '18 at 19:34
add a comment |
1
1
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">
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
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">
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
answered Nov 13 '18 at 18:08
Husam IbrahimHusam Ibrahim
2,753315
2,753315
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@user3005003 It should work if the HTML element emitting thechangeevent is the root element of your component. If not you'll need to usev-on="$listeners"on that element. You can read up on that here.
– Husam Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to$emita customchangeevent by yourselectelement like this<select @change="$emit('change')" ...>.
– Husam Ibrahim
Nov 13 '18 at 19:34
add a comment |
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@user3005003 It should work if the HTML element emitting thechangeevent is the root element of your component. If not you'll need to usev-on="$listeners"on that element. You can read up on that here.
– Husam Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to$emita customchangeevent by yourselectelement like this<select @change="$emit('change')" ...>.
– Husam Ibrahim
Nov 13 '18 at 19:34
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
Thanks for the advice, and for directing me to .native, i hadn't seen that before, however this still isn't working for me.
– user3005003
Nov 13 '18 at 18:12
@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 Ibrahim
Nov 13 '18 at 18:17
@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 Ibrahim
Nov 13 '18 at 18:17
@user3005003 Another option would be to
$emit a custom change event by your select element like this <select @change="$emit('change')" ...>.– Husam Ibrahim
Nov 13 '18 at 19:34
@user3005003 Another option would be to
$emit a custom change event by your select element like this <select @change="$emit('change')" ...>.– Husam Ibrahim
Nov 13 '18 at 19:34
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53286621%2fhow-to-trigger-function-in-vue-when-dropdown-option-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
