How to bypass a plugin prevent default on parent element

Question

I'm using the vue-select plugin and dynamically attached <li> element to the options. However, when ever I clicked on my new <li> element, the dropdown close itself.

My desire results, when my <li> element is clicked, the dropdown menu stay open.

I added a link inside my <li> element and bind to an onclick event. However, when I clicked the link my component method is not fire. I think there's a event.preventDefault() is used in the parent dropdown menu.

How can I get around or bypass the parent preventDefault() and fire up my method when my <li> element link is clicked?

<li><a v-on:click="moreInfo"> Learn More </a></li>

My component method

methods: {
     moreInfo: function (event) {
                    console.log('reach this part.');
                }
}

score 1 · Answer 1 · edited Jul 15 '22 at 04:52

You'll need to event.preventDefault() to prevent clicking the <a> from trying to perform navigation like normal links do, and event.stopPropagation() to prevent the event from bubbling up to the <li> and opening the menu.

https://v2.vuejs.org/v2/guide/events.html

Vue has a .stop and .prevent option to stop propagation or prevent default. I don't know enough Vue to know the exact syntax you'll need.

It looks like it may actually be:

<li><a v-on:click.stop.prevent="moreInfo"> Learn More </a></li>

They do list THIS as an example:

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

score 1 · Answer 2 · answered Aug 15 '18 at 02:30

<template>
    <div style="min-height:100%;">
        <h1>Vue Select</h1>
        <v-select @input="moreInfo" :closeOnSelect="false"  :options="options">

        </v-select>

    </div>
</template>


<script>
    export default {
        data() {
            return {
                options: [
                    'foo',
                    'bar',
                    'baz'
                ]
            }
        },
        methods:{
            moreInfo(option){

                console.log(option,'I reached Here')
            }
        },


    }
</script>

<style lang="scss">

</style>

the main event when select happen is query this event happens in the parent element you should listen for it, and when you, when you want to set the menu, opened you have to change then prop closeOnSelect and you can also pass your function as the prop onChange

How to bypass a plugin prevent default on parent element

2 Answers2