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

Question

向v-bind:data切换添加了stop，但事件仍在为锚点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>

Answer 1

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

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