解决Vue中@Click事件无效

最新推荐文章于 2024-01-31 11:01:48 发布
最新推荐文章于 2024-01-31 11:01:48 发布
阅读量5.5k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43750656/article/details/109161529
版权

实现的效果为当点击某个搜索的历史记录后，input框中就会有选中的文
在这里插入图片描述

在给一个span绑定click事件时无效，原因是当这个input框失去焦点后，v-show就成为了false，如果这个为false的话，搜索历史记录栏就不会显示，这样其上面的span也没有了，我们可以将v-show置换为true，然后在点击事件中置换为false
在这里插入图片描述
在这里插入图片描述

DanceDonkey
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决VUE框架 导致绑定事件的阻止冒泡失效问题
11-27
前面遇到了一个问题就是VUE框架内部做了一些处理，使得在我们通过v-for渲染DOM的时候添加新元素的时候，绑定事件也能对新增的元素有效。 而这次遇到的问题则是，原本绑定事件中（该函数没有写在vue实例的methods中），导致阻止冒泡事件失效了。无论是return false 还是event.stopPropagation();都无效。 此时需要通过用VUE提供了事件修饰符来处理，比如阻止事件冒泡@click.stop=’xx()’ .stop .prevent .capture .self .once <a></a> <!
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
span 的click事件没有响应
一只小蚂蚁的自白
10-31 1万+
示例： <span @click="action"></span> function action(){} 问题： 点击span元素的时候，span元素没有响应。 原因： span是div的子元素，点击span的时候，发生了事件冒泡，响应在了span的父元素div上，所以对click事件的响应应该是父元素div。 处理方式： 1、将span标签改为div...
vue下@click失效的一个问题
qq_43740750的博客
01-08 401
（冷门问题记录） 源码： <div v-show="item.showOption" class="flavorSelect"> <span v-for="(it, ind) in dishFlavorsData" :key="ind" class="items" @click="checkOption(it,ind,index)" >{{ it.name }}</span&gt
Vue中@click事件无效？@click.native中.native的含义和使用
weixin_44370837的博客
01-25 9058
记录@click绑定事件的一个坑 问题描述： 今天开发的时候，给组件绑定了@click事件，但是事件却没有执行。 代码如下： <template> <div> <span>父组件页面</span> <search @click="onSubmit"></search> </div> </template> <script> methods: { onSubmit() { alert('sh
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 5557
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
vue中@click绑定事件点击不生效
jiangjunyuan168的博客
10-24 1万+
原因： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 解决方法： 方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符） @click.native = "..." 方法2：向外发送click事件 添加 methods 内添加 _click 方法： methods: { _click: functi
在Vue中@click方法不起效
m0_52228992的博客
01-31 1076
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
Vue下拉框使用@click点击失效的解决方案
ws135867的博客
07-18 1522
通过各种尝试后，我发现在option中设置@click事件可以完美的解决以上问题。但是select下的option标签理论上是无法监听点击事件的，所以我在@click后面添加了.native修饰符。给select组件设置@click事件点击没有反应，设置@change事件也无法满足要求（这里涉及到click和change事件得执行顺序。@change：选择下拉框中的某个选项，当将要选择的选项与正在框中的值不一样才为一次change事件。但是文本框中的内容总是与我下拉框选中的值不一致。
Vue @click不生效问题
weixin_43872691的博客
08-02 675
Vue @click不生效问题。
解决vue组件中click事件失效的问题
12-13
本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中未知mutation类型的错误。 首先，让我们深入理解Vue中的事件绑定。Vue提供了多种方式来绑定事件，例如`v-on:click`、`@click`和`@click....
解决vue 绑定对象内点击事件失效问题
12-12
突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue子组件点击事件@click无效
哆啦A梦的百宝袋的博客
01-13 4831
vue子组件点击事件@click无效
axios实现同步请求
热门推荐
qq_43750656的博客
07-17 3万+
如何实现ajax请求的同步？ 通过jquery发送，将async属性设置为false，这样就会发送同步请求 在axios中，所有的请求都是异步发送的。所以单独用axios是实现不了同步的，需要结合async与await关键字使用。 var data = {} axios.get("./data1.json") .then(res => data = res.data) console.log(data) 如果我们的代码是这个顺序，则data还是个空对象，是获取不到的。 async 与
vue3中的reactive函数声明数组
qq_43750656的博客
02-23 3万+
vue3中reacitve函数如何声明一个响应式数组，如以下案例 <template> <div> <div v-for="item in arr" :key="item"> {{item}} </div> <button @click="change">change</button> </div> </template> <scr
Vue3中父子组件传值以及方法调用
qq_43750656的博客
07-19 6097
子组件接受父组件传的值 子组件通过生命props属性来接收父组件传递的值 //子组件 <div>{{msg}}</div> export default { name:"child"， props:{ msg:{ type:String, required:true, default:"" } }, setup(props,context){ return { msg:props.msg } } } //父组件 <!--.
富文本编辑器wangEditor回显问题
qq_43750656的博客
09-30 6041
这个问题在github也提issues了，目前靠谱的解决方法为在关闭dialog时同时销毁富文本编辑器，让dialog与富文本编辑器同时v-if绑定同一个变量即可。
img标签@click事件无效vue3
最新发布
06-14
在Vue 3中，如果`<img>`标签的`@click`事件无效，可能是因为`<img>`元素默认不会触发`click`事件，因为它并不是一个可交互元素。解决这个问题的方法有： 1. 使用`v-on:click`代替`:click`，因为`:click`是Vue 2的语法，Vue 3推荐使用`v-on`来绑定自定义事件[^1]： ```html <img v-on:click="handleImageClick" src="..."> ``` 2. 如果需要处理点击行为，可以在`<img>`外部包裹一个`<button>`或者其他可交互元素，并将`@click`绑定到这个外部元素上，再通过JavaScript代理事件处理： ```html <button @click="handleImageClick"> <img :src="src" /> </button> ``` 3. 如果`img`需要触发一个自定义的点击行为，可以将`@click`绑定到父组件并使用`$event`来触发相应的逻辑： ```html <template> <div @click="$emit('image-click')"> <img :src="src" /> </div> </template> <script> export default { methods: { handleImageClick() { // 在这里处理点击事件 this.$emit('image-click'); } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值