Vuejs 使用引导数据切换停止事件传播

Posted 2023-03-29

【中文标题】Vuejs 使用引导数据切换停止事件传播

【英文标题】：Vuejs stop event propagation with bootstrap data-toggle

【发布时间】：2021-12-26 10:59:56

【问题描述】：

为 v-bind:data-toggle 添加了停止，但该事件仍在为锚 href 传播。我做错了什么？

<template>
    <ul class="nav navbar-nav">
        <li v-for="(item, i) in items" :class="classes(item)">
            <a :target="item.target" :href="item.href" :style="'color:'+color(item)">
                <span v-if="item.icon_class" :class="'icon '+item.icon_class"></span>

                <span class="title"> item.title </span>

                <span v-if="item.children.length > 0" :class="'icon-toggle ' + (item.active ? 'voyager-angle-down' : 'voyager-angle-right')" :data-target="'#'+item.id+'-dropdown-element'" v-bind:data-toggle.stop="item.children.length > 0 ? 'collapse' : false" :aria-expanded="item.children.length > 0 ? String(item.active) : false"></span>
            </a>

            <div v-if="item.children.length > 0" :id="item.id+'-dropdown-element'" :class="'panel-collapse collapse' + (item.active ? ' in' : ' ')">
                <div class="panel-body">
                    <admin-menu :items="item.children"></admin-menu>
                </div>
            </div>
        </li>
    </ul>
</template>

不是真正的 vuejs 方式，但我能够做到这一点的唯一方法是删除 v-bind 并手动执行：

<template>
    <ul class="nav navbar-nav">
        <li v-for="(item, i) in items" :class="classes(item)">
            <a :target="item.target" :href="item.href" :style="'color:'+color(item)">
                <span v-if="item.icon_class" :class="'icon '+item.icon_class"></span>
                <span class="title"> item.title </span>
                <span v-if="item.children.length > 0" :class="'icon-toggle ' + (item.active ? 'voyager-angle-down' : 'voyager-angle-right')" v-on:click.stop.prevent="toggleCollapse(item, $event)" :data-target="'#'+item.id+'-dropdown-element'" :aria-expanded="item.children.length > 0 ? String(item.active) : false"></span>
            </a>
            <div v-if="item.children.length > 0" :id="item.id+'-dropdown-element'" :class="'panel-collapse collapse' + (item.active ? ' in' : ' ')">
                <div class="panel-body">
                    <admin-menu :items="item.children"></admin-menu>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
export default 
    props: 
        items: 
            type: Array,
            default: [],
        
    ,
    methods: 
        classes: function(item) 
            var classes = [];
            if (item.children.length > 0) 
                classes.push('dropdown');
            
            if (item.active) 
                classes.push('active');
            

            return classes.join(' ');
        ,
        color: function(item) 
            if (item.color && item.color != '#000000') 
                return item.color;
            

            return '';
        ,
        toggleCollapse: function(item, $event) 
            const $target = $($event.target);

            $target.toggleClass('collapsed');

            const collapseEvent = $target.hasClass('collapsed') ? 'show' : 'hide';

            // Remove all
            $('> li.active', this.$el).removeClass('active')
            $('> li .icon-toggle', this.$el).removeClass('voyager-angle-down').addClass('voyager-angle-right')

            if (collapseEvent == 'show') 
                $target.addClass('voyager-angle-down').removeClass('voyager-angle-right')
                $target.parents('li.dropdown').addClass('active');
             else 
                $target.addClass('voyager-angle-right').removeClass('voyager-angle-down')
            

            $('#'+item.id+'-dropdown-element').collapse(collapseEvent);

            return false;
        
    
;
</script>

【参考方案1】：

我认为data-toggle 不处理事件，也不支持.stop 修饰符。如果您想阻止默认的<a> 操作发生，那么您需要阻止该元素上的点击事件，即：

<a
  @click.prevent
  :target="item.target"
  :href="item.href"
  :style="'color:'+color(item)">

【讨论】：

我想在这里保留默认行为。除非有更好的方法，否则我现在只是手动完成。