Question

我正在使用 vue-select 插件并将动态附加 <li>元素添加到选项。但是，当我单击新的<li>元素时，下拉菜单会自行关闭。

我的愿望产生了，当单击我的<li>元素时，下拉菜单保持打开状态。

我在<li>元素内添加了一个链接，并绑定到一个onclick事件。但是，当我单击链接时，我的组件方法无法启动。我认为有一个事件。父下拉菜单中使用了preventDefault（）。

当我点击<li>元素链接时，如何绕过或绕过父类preventDefault（）并启动方法？

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

我的组件方法

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

Answer 1

您需要event.preventDefault()来阻止单击<a>来尝试像普通链接一样执行导航，并且需要event.stopPropagation()来防止事件冒泡到{{1 }}，然后打开菜单。

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

Vue具有<li>和.stop选项，可以停止传播或阻止默认设置。我对Vue的了解不足，无法知道您需要的确切语法。

看起来可能实际上是：

.prevent

他们确实列举了这个例子：

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

Answer 2

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

选择发生时的主要事件是查询此事件发生在父元素中，您应该监听它，当您要设置菜单时，打开该菜单时必须先更改prop closeOnSelect，然后还可以将函数作为prop {{1 }}

如何绕过插件阻止父元素上的默认设置

2 个答案: