VUE div click无效
每逢 半 年 &nbs p; 总要遇到一个前端诡异问题,花了个把小时才解决,记录一下
<div v-else -i f=" IT em.ty PE === 7" class="left -t itle bgc-opacity" :style="styleObj" @click="changeliv ei sResize(true)"> <!-- 字幕 --> <div v-if ="!item.text"> <div class="text -s on">{{ $t(' PR ogr am .caption') }}</div> </div> <div v-else> <div class="left-align-text caption-text" :style="{font Size: item.fontSize + 'px', color: item.fontColor}"> {{ item.text }} </div> </div> </div>
当@Click写在里面div时 无反应 写在外面有反应
当@Click写在里面DIV时 把外面的:style="styleObj"移出 也有反应
@click事件无效?@click.native中.native的含义和使用
记录@click 绑定事件 的一个坑
问题描述:
今天开发的时候,给组件绑定了@click事件,但是事件却没有执行。
代码如下:
<template> <div> <span>父组件页面</span> <se Arch @click="onS ub mit"></search> </div> </template> <script> methods: { onSubmit() { alert('show') } } </script>
子页面search.vue
<template> <div> <button>点击查找</button> </div> </template> <script> </script>
search是我自己封装的一个组件,问题就出在这儿,search是子组件,想要直接在父组件触发click方法。
方案 一:不 改变 子组件页面的话,父页面就必须这么写
<search @click.native="onSubmit"></search>
方案二:
父页面
<template> <div> <span>父组件页面</span> <search @click="onSubmit"></search> </div> </template> <script> methods: { onSubmit() { alert('show') } } </script>
子页面search
<template> <div> <button @click='handleClick'></button> </div> </template> <script> methods: { handleClick() { this.$emit('click') } } </script>
至于为什么加上.native就可以直接触发事件,是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写),如果不加natvie,会认为监听的是来自子组件search.vue自定义的事件,然而子组件内也没有使用$emit()来将子组件的触发事件抛出,因此onSubmit()方法没有执行。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的 文章 : vue自定义组件@click点击失效问题及解决 解决vue组件中click事件失效的问题 vue开发移动端使用better-scroll时click事件失效的解决方案
总结
以上是 为你收集整理的 VUE div click无效的问题及解决 全部内容,希望文章能够帮你解决 VUE div click无效的问题及解决 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于VUE div click无效的问题及解决的详细内容...