0

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

我的愿望结果，当我的<li>元素被点击时，下拉菜单保持打开状态。

我在我的<li>元素中添加了一个链接并绑定到一个 onclick 事件。但是，当我单击链接时，我的组件方法不会触发。我认为在父下拉菜单中使用了 event.preventDefault() 。

<li>当我的元素链接被点击时，如何绕过或绕过父 preventDefault() 并启动我的方法？

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

我的组件方法

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

2 回答 2

1

您需要event.preventDefault()防止单击<a>尝试像普通链接一样执行导航，并event.stopPropagation()防止事件冒泡<li>并打开菜单。

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

Vue 有一个.stopand.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>
于 2018-08-15T02:09:49.073 回答
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

于 2018-08-15T02:30:38.787 回答