xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

vue stop event bug

[Vue warn]: Error in v-on handler: "TypeError: e.prevntDefault is not a function"

Event-Modifiers

https://vuejs.org/v2/guide/events.html#Event-Modifiers

<template>
    <!-- <div class="tools-hover-box-container" @click="clickFilter"> -->
    <div class="tools-hover-box-container" @click.prevent="clickFilter">
    <!-- <div class="tools-hover-box-container" @click.stop="clickFilter"> -->
    <!-- <div class="tools-hover-box-container" @click.stop.prevent="clickFilter"> -->
        <section class="tools-hover-box-item"
            v-for="({name, list}, i) in cardsList"
            :key="i">
            <span class="tools-hover-box-category">{{name}}</span>
            <ul class="tools-hover-box-list">
                <li class="tools-hover-box-list-item"
                    data-hoverflag="true"
                    v-for="({icon, title, routerName}, j) in list"
                    :key="j"
                    @click.prevent="gotoRouter(routerName)">
                    <icon-svg class="item-icon-size" :icon-class="icon" />
                    <p class="item-title">{{title}}</p>
                </li>
            </ul>
        </section>
    </div>
</template>

clickFilter (e) {
    console.log('e.target =', e.target, e);
    const {
        hoverflag: hoverFlag,
    } = e.target.dataset;
    // console.log('✅ e.target =', e.target, hoverFlag === undefined, typeof hoverFlag);
    if(hoverFlag !== undefined) {
        // goto
        // this.$emit('click');
        // console.log('✅ hoverFlag =', hoverFlag, typeof hoverFlag);
    } else {
        // ignore
        // console.log('❌ hoverFlag =', hoverFlag, typeof hoverFlag);
        e.prevntDefault();
        e.stopPropagation();
    }
},

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---