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. git的使用学习笔记4--创建分支

    1.在git上新建分支 查看本地分支 git branch 查看远程分支 git branch -a 创建一个分支 git checkout -b branch1 再次查看远程分支可以看到该分支 2. ...

  2. java画海报二维码

    package cn.com.yitong.ares.qrcode; import java.awt.BasicStroke;import java.awt.Color;import java.awt ...

  3. hashCode、equals详解

    hash和hash表是什么? hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来得到一个hash值,这个时候,我们就需要知道另一个东西,hash表,通过hash算法得到的hash值 ...

  4. nodejs如何下载指定版本

    浏览了一下nodejs的官网,但是官网没有下载低版本的下载地址,所以找了一个可以下载指定版本node的下载地址https://nodejs.org/download/release/v8.9.4/

  5. RedisUtil,Redis工具类

    RedisUtil,Redis工具类 1.配置maven,增加依赖 2.配置工具类 1.配置maven,增加依赖 <dependency> <groupId>redis.cli ...

  6. 学习一下 SpringCloud (四)-- 服务降级、熔断 Hystrix、Sentinel

    (1) 相关博文地址: 学习一下 SpringCloud (一)-- 从单体架构到微服务架构.代码拆分(maven 聚合): https://www.cnblogs.com/l-y-h/p/14105 ...

  7. 小白搭建WAMP详细教程---php安装与设置

    一.php官网下载php压缩包 到php官网http://www.php.net 下载,有很多版本,我们这里选择7.2.25,具体步骤如下: 二.php的安装 下载后得到如下的压缩包,将压缩包解压到您 ...

  8. Arduino字符串笔记

    Arduino里的字符串笔记 1 字符串转数字 String To Int /* 使用String.toInt()将字符串转为数字示例 */ String inString = "" ...

  9. NetCore控制台程序-使用HostService和HttpClient实现简单的定时爬虫

    .NetCore承载系统 .NetCore的承载系统, 可以将长时间运行的服务承载于托管进程中, AspNetCore应用其实就是一个长时间运行的服务, 启动AspNetCore应用后, 它就会监听网 ...

  10. 零基础如何使用python处理字符串?

    摘要:Python的普遍使用场景是自动化测试.爬取网页数据.科学分析之类,这其中都涉及到了对数据的处理,而数据的表现形式很多,今天我们来讲讲字符串的操作.   字符串是作为任意一门编程语言的基础,在P ...