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 发布文章使用:只允许注册用户才可以访问!


vue stop event bug的更多相关文章

  1. shit mint-ui & navbar click event bug

    shit mint-ui & navbar click event bug # Vue 2.0 npm install mint-ui -S // 引入全部组件 import Vue from ...

  2. vue slot nested bug

    vue slot nested bug slot name bug Error <slot name="global-system-guide-slot"></s ...

  3. vue & vue router & match bug

    vue & vue router & match bug match bugs solution name must be router https://stackoverflow.c ...

  4. svg click event bug & css pointer-events

    svg click event bug & css pointer-events svg click event not working Error OK ??? css class /* d ...

  5. Vue:event对象

    一.什么是event对象 event对象:代表的是事件的状态.比如获取当前的元素:e.Target. 二.事件冒泡 什么是事件冒泡呢?百度百科的解释如下: 当事件发生后,这个事件就要开始传播(从里到外 ...

  6. Vue $emit $event 传值(子to父)

    事件名 始终使用 kebab-case 的事件名. 通过事件向父组件发送信息 子组件中EnFontsize.vue中$emit <button @click="$emit('enlar ...

  7. vue 中 event.stopPropagation() 和event.preventDefault() 使用

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开 ...

  8. vue之$event获取当前元素的节点

    <p @click = “clickfun($event)”>点击</p> methods: { clickfun(e) { // e.target 是你当前点击的元素 // ...

  9. vue v-for动画bug

    因为是v-for 循环 出来的,:key = "index" 会出现问题,所以,需要把:key="XXX"换成其他属性就好了. 链接参考: https://se ...

随机推荐

  1. JavaWeb三大框架基础架构——CRUD的基础功能搭建

    @ 目录 介绍 注意 applicationContext.xml mybatis-config.xml web.xml 结束语 介绍 项目前端采用了bootstrap,后端是ssm三大框架 注意 这 ...

  2. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

  3. ORM框架对比以及Mybatis配置文件详解

    ORM框架对比以及Mybatis配置文件详解 0.数据库操作框架的历程 (1) JDBC ​ JDBC(Java Data Base Connection,java数据库连接)是一种用于执行SQL语句 ...

  4. FGC频繁 GC卡顿

    https://mp.weixin.qq.com/s/I1fp89Ib2Na1-vjmjSpsjQ 线上服务的FGC问题排查,看这篇就够了! 原创 骆俊武 IT人的职场进阶 2020-05-10   ...

  5. innodb和myisam原理

    MyISAM索引实现 MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的是数据记录的地址.如图:  这里设表一共有三列,假设我们以Col1为主键,则上图是一个MyISAM表的主索引 ...

  6. orm(Manager isn't accessible via %s instances" % cls.__name)报错

    报错信息 Manager isn't accessible via %s instances" % cls.__name 解决方法 https://www.jianshu.com/p/5e0 ...

  7. 复制虚拟机,链接网络问题:没有找到合适的设备:没有找到可用于链接System eth0 的

    http://my.oschina.net/coolfire368/blog/292742 1./etc/udev/rules.d/70-persistent-net.rules 修改也成,修改时留下 ...

  8. HttpURLConnection下载文件流

    package com.loan.modules; import sun.net.www.protocol.file.Handler; import java.io.*; import java.ne ...

  9. 【从零开始撸一个App】RecyclerView的使用

    目标 前段时间打造了一款简单易用功能全面的图片上传组件,现在就来将上传的图片以图片集的形式展现到App上.出于用户体验考虑,加载新图片采用[无限]滚动模式,Android平台上我们优选Recycler ...

  10. 真正云原生的智能运维体系,阿里云发布ECS自动化运维套件

    云计算的发展,推动了自动化运维.DevOps.AIOps 等趋势的兴起,在业务快速变化的今天,企业希望通过一套自动化运维的专家系统提高运维效率,为业务提供支撑. 传统的方式下,打造一套成熟的 DevO ...