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. 基于go-cqhttp实现QQ机器人

    本篇文章记录一下自己在编写QQ机器人的时候所遇到的一些问题和核心功能的实现. QQ机器人RabbitBot采用python编写,由于是个人学习使用,故目前不会开源完整代码,只会放出核心代码供学习参考. ...

  2. 自修改代码 on the fly 动态编译 即时编译 字节码

    https://zh.wikipedia.org/wiki/自修改代码 自修改代码(Self-modifying code)是指程序在运行期间(Run time)修改自身指令.可能的用途有:病毒利用此 ...

  3. odoo-nginx 配置

    p.p1 { margin: 0; font: 12px "Andale Mono"; color: rgba(40, 254, 20, 1); background-color: ...

  4. 洛谷 p3391

    题目背景 这是一道经典的Splay模板题--文艺平衡树. 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1, ...

  5. 济南学校D1T3_hahaha

    [问题描述] 小Q对计算几何有着浓厚的兴趣.他经常对着平面直角坐标系发呆,思考一些有趣的问题.今天,他想到了一个十分有意思的题目: 首先,小Q会在轴正半轴和轴正半轴分别挑选个点.随后,他将轴的点与轴的 ...

  6. Prometheus自定义监控内容

    Prometheus自定义监控内容 一.io.micrometer的使用 1.1 Counter 1.2 Gauge 1.3 Timer 1.4 Summary 二.扩展 相关内容原文地址: 博客园: ...

  7. java架构《并发线程高级篇四》

    本章主要讲并发线程的常见的两种锁.重入锁和读写锁 一:重入锁(ReentrantLock) 概念:重入锁,在需要进行同步的代码加锁,但最后一定不要忘记释放锁,否则会造成锁永远不能释放,其他线程进不了 ...

  8. 2.DHCP的基本概念

    1.DHCP典型组网 DHCP组网中,包括以下三种角色: DHCP服务器 DHCP服务器负责从地址池中选择IP地址分配至DHCP客户端,还可以为DHCP客户端提供其他网络参数,如默认网关地址.DNS服 ...

  9. (23)gzip命令:压缩文件或目录&&gunzip命令:解压缩文件或目录

    1.gzip 是 Linux 系统中经常用来对文件进行压缩和解压缩的命令,通过此命令压缩得到的新文件,其扩展名通常标记为".gz". 再强调一下,gzip 命令只能用来压缩文件,不 ...

  10. Cisco的互联网络操作系统IOS和安全设备管理器SDM__备份和恢复Cisco 配置

    对路由器配置进行的任何修改存储在running-config文件中.如果在修改了running-config后没有输入copy run start命令,那么路由器重载或掉电后,修改的内容会丢失. 1. ...