使用VUE框架后，绑定事件失效了

最新推荐文章于 2023-06-09 13:06:22 发布

原创最新推荐文章于 2023-06-09 13:06:22 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #事件失效

web 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在Vue.js中初始化前绑定的事件为何会失效的原因，并提供了正确的绑定时机及建议使用Vue事件修饰符来增强事件处理。

今天遇到一个问题，以前没留意过，在初始化vue对象之前元素绑定的方法都失效了，我还以为是我的方法写错了；debugger了下，没错！绑定了，然后走过vue之后，绑定的事件都没了！为什么会这样呢？晚点查一下

这个后来搞定了，因为在初始化时，所有的dom元素都被vue实例接管了，事件会失效

在生命周期节点mounted中绑定就可以了（建议使用Vue的事件修饰符）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hyxdppt

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

同时绑定vue事件和jQuery事件

恍若c的博客

08-24

611

一个元素绑定一个vue事件一个jQuery事件，jQuery事件.click会失效 <a class="thumbLinkCart" href="#" onclick="simpleCart()"></a> $(document).ready(function() { $('#demo12').click(function() { alert('Item added to cart'); }); }); 可以将多个事件(类似)绑定到同一个元素. 但是.

避大坑！Vue3中reactive丢失响应式的问题

Yan9_9的博客

12-09

1万+

避开直接赋值和结构，reactive直接包裹一个对象。简单数据类型使用ref()来进行定义。

3 条评论您还未登录，请先登录后发表或查看评论

关于动态生成dom绑定事件失效的原因及解决方法

Drift King 的博客

11-29

1264

之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： 1. 事件失效的原因：（1）bind事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了（2）同样，当你使用var aa = docu

同时使用vue 和 jquery， jquery事件绑定失效

Lv骚年

08-21

6622

问题：一个h5项目同时引用了vue.js和jquery.js，发现jquery绑定的事件失效。原因是： vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素. 解决办法：先加载vue.js，让页面渲染完成后加载jq，给jq绑定ready事件 $(document).ready(function(){ ...

vue3学习笔记（6）生命周期

gtd54789的博客

04-24

814

Vue3专栏入口一、常用的生命周期钩子没什么讲的就是一些概念，后边用到可以把案例写回来，暂时就了解一下哇。 # 我们最常用的，在创建组件前执行 setup() # 组件开始挂载前执行 onBeforeMount() # 组件挂载完执行 onMounted() # 组件更新前执行 onBeforeUpdate() # 组件更新后执行 onUpdated() # 组件卸载前执行 onBeforeUnmount() # 组件卸载后执行 onUnmounted() # 当A组件切换成B组件时 A组件消失后执行

vue 中通过js插入的dom 无法生效css

weixin_43815091的博客

04-06

2009

vue 中通过js插入的dom 无法生效css 问题描述通过js向div中动态添加dom后，事先写好的css样式对新增的dom不生效原因通过测试，这是因为vue文件中的style标签添加了scoped的原因，而scoped的作用是为了保证这些css样式只会对当前vue文件(组件)生效，但是由于其他vue文件(组件)中也有可能会出现相同的class名相同的css样式，于是vue就采用了添加随机后缀的方式防止class名重复的样式出现样式覆盖的情况。解决办法把style标签的scoped干掉即

Vue 组件绑定事件无效

qq_41818857的博客

06-14

2368

在vue中直接在组件上绑定事件是无效的，例如以下代码是无效的： <div id="app"> <btn @click='alert(1)'>点击</btn> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <script> Vue.co

解决VUE框架导致绑定事件的阻止冒泡失效问题

08-27

当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的解决方案。一、问题描述在Vue框架中，我们可以使用v-for指令来渲染DOM元素，并添加绑定事件。但是，当...

解决vue 绑定对象内点击事件失效问题

10-18

在模板中正确地使用v-on:click指令后，当用户点击按钮时，Vue框架将查找并调用与之关联的`handleClick`方法。在某些情况下，开发者可能还会遇到事件处理器中this的上下文问题。在Vue中，直接在模板上使用事件...

解决VUE双向绑定失效的问题

10-16

总之，解决Vue双向绑定失效的问题需要开发者全面掌握Vue的工作原理，了解组件的内部机制，并结合具体问题采取相应的策略。通过不断的实践和学习，我们将能够更有效地利用Vue.js提供的强大功能，构建稳定和高效的前端...

浅谈vue中组件绑定事件时是否加.native

10-16

在Vue中，我们可以使用`.native`修饰符来决定事件绑定的行为。本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其背后的原理。 1. 普通组件绑定事件在Vue中，当我们为一个普通的HTML元素（如`...

vue 点击事件失效

热门推荐

Hero_rong的博客

11-10

2万+

点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑定到span上测试一下就好了，如果是被覆盖了，加个这个，.stop 阻止一下冒泡就行了 @click.stop="doSomething($event)" 2.还有一种可能被默认事件阻止了，我们加个这个就能解决，.native @click.native='setUp(index)' 3.如果项目中的某些组件，使用了

vue子组件绑定事件失效问题

一止弋的博客

09-05

6809

vue中子组件绑定事件失效问题最近在学习vue的过程中，深刻领会到组件机制的便利，但也遇到了一些麻烦的问题。 vue中在父组件中引入一个子组件，想要直接在父组件中给子组件或者包含子组件的dom元素设置是行不通的。正确的方法是：先在子组件中监听相关事件，监听到后，将监听到的事件连带相关的参数一同返回到父组件中处理。子组件中监听事件 &lt;div class="con" @cli...

vue组件绑定事件无效问题的解决方案

qq_44318215的博客

09-07

809

在开发的时候遇到了一个问题，给router-link标签添加点击事件后，却不触发该事件，经查阅资料后，解决办法如下：对于vue自定义的标签如< router-link >以及组件< my-component >都是会阻止事件触发的，若想要绑定事件，则需要使用native修饰符，如@click.native 将事件转化为原生事件。 ...

vue页面缓存失效问题解决

吴小迪的博客

06-09

2885

前端技术栈用的是vue，然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面，保留之前的查询条件及状态等等】如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看。方案一：直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。，如果是3.2.34+的版本就无需给组件声明name。方案二：将组件的name改成正确的。

vue3-treeselect 数据绑定问题

weixin_43988035的博客

06-07

779

vue3-treeselect 数据绑定响应式问题

Vue3-treeSelect 绑定数据有bug问题

qq_35919264的博客

08-20

2090

Vue3-treeSelect 绑定数据有bug问题好吧，其实吧，我也没啥好办法解决，所以我重写了个简单的，没那么多功能的就只有v-model，options，placeholder，normalizer4个参数，下面把代码贴出来，需要注意的是，placeholder，normalizer这俩是非必须项，如果不需要可以不写，placeholder不写，默认是空，normalizer不写默认是{ id: ‘id’, label: ‘label’, children: ‘children’, } 不过大佬们看

vue3-treeselect数据绑定失败问题解决

Nio的博客

06-30

2451

目标插件： https://github.com/megafetis/vue3-treeselect 问题描述：是用这个插件做数据绑定的时候会出现这样的问题，当第一次赋值(v-model)时，可以实现选中，但当数据变化时，选中的数据还是之前的数据，不会自动的切换选中的数据。 <treeselect v-model="form.parentId" :options="deptOptions"

vue的v-model双向绑定未生效

kniknii的博客

03-23

3556

神坑描述：前端vue在做双向绑定时，如果采用的是二级属性绑定，并且在声明时仅声明了一级属性，那么在这种情况下，如果首次赋值不是通过页面交互录入，而是通过程序赋值，并且赋值时采用直接给二级属性单独赋值，就会产生双向绑定失效的情况；规避方法：采用直接给一级属性赋值的方式即可规避此坑，如果一级属性绑定有大量需要初始化的二级属性，那么可以通过Object.asign增量的方式赋新值；解决办法 var self = this // 此方式首次赋值（页面刚打开或刷新后首次赋值）有问题 se

ios中 vue框架input@blur事件在ios中失效