Как обойти плагин, чтобы предотвратить родительский элемент по умолчанию

Question

Я использую плагин vue-select и динамически присоединяю <li> элемент к опциям. Тем не менее, когда я когда-либо нажимал на мой новый <li> элемент, раскрывающийся список закрыть сам.

Мое желание заканчивается, когда мой <li> элемент нажат, раскрывающееся меню остается открытым.

Я добавил ссылку внутри <li> элемент и привязать к событию onclick. Однако, когда я нажал на ссылку, мой компонентный метод не срабатывает. Я думаю, что есть событие.preventDefault() используется в родительском раскрывающемся меню.

Как я могу обойти или обойти родительский protectDefault () и запустить мой метод, когда мой <li> ссылка на элемент нажата?

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

Мой компонентный метод

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

Answer 1

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

главное событие, когда происходит событие выбора, это запрос, это событие происходит в родительском элементе, вы должны его прослушать, и когда вы, когда хотите открыть меню, вы должны изменить, затем проп closeOnSelect и вы также можете передать свою функцию в качестве опоры onChange

Answer 2

Вам нужно будет event.preventDefault() чтобы предотвратить нажатие <a> от попытки выполнить навигацию, как обычные ссылки, и event.stopPropagation() чтобы предотвратить всплеск события до <li> и открыв меню.

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

Vue имеет .stop а также .prevent возможность остановить распространение или предотвратить дефолт. Я не знаю достаточно Vue, чтобы знать точный синтаксис, который вам нужен.

Похоже, что это может быть на самом деле:

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

Они перечисляют ЭТО в качестве примера:

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