vue @click不生效_Vue+element(v2.3.2)(第四期)

最新推荐文章于 2024-03-04 09:39:17 发布
最新推荐文章于 2024-03-04 09:39:17 发布
阅读量323 收藏
点赞数
文章标签： vue @click不生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33741534/article/details/113323409
版权

1.挂载全局变量url

  • 1.新增url.js
let BASE_URL = "https://xxx.com";

export default { BASE_URL }
  • 2.main.js
import golbal_URL from "./utils/url";
Vue.prototype.$BASE_URL = golbal_URL;
  • 3.页面使用
console.log(this.$BASE_URL.BASE_URL) //https://xxx.com

2.通过csdn引入vue，加载有时候pending很长时间，然后报错

bda612a2ca6d287cc246783f5f8a19a3.png

解决方案:将csdn

最低0.47元/天 解锁文章
李牧錞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue_Element_ShopManage:基于vue+element的商品后台管理
05-02
基于Vue.js和Element-ui的商城后台管理系统 1.项目运行： git clone 到本地 cd 到 vue_element_shop_manage目录下运行: npm install 或者 cnpm install 运行： npm run serve 浏览器打开 2.项目功能（多图） 1.登录&...
vue+element实现大文件上传
07-04
vue+element实现大文件上传
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事件失效的问题
12-13
最近使用vue学习开发移动端的项目，使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候，点击事件失效，v-on:click、v-bind:click、@click.native都不行，试了一下@touchstart是却是可以的，发现better-scroll的配置中没有设置click：true，设置过之后click事件成功。 后来在使用vuex的时候一直报“[vuex] unknown mutation type: changeCity”，才发现在store文件中将mutations写在了state里面，被自己蠢哭了。。。正确写法如下
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 6620
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
在Vue中@click方法不起效
m0_52228992的博客
01-31 771
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2206
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
关于Vue中@click不生效的问题
qq_39043714的博客
05-08 2077
关于Vue中@click不生效的问题 @click只能在div标签下才可以生效！
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
vue-element-admin的官网
vue+echarts+element ui+django 前后端分离考勤系统源码.zip
05-08
vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+element ui+django 前后端分离考勤系统源码 vue+echarts+...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue 元素绑定的@click方法失效问题
千里之行，始于足下！
10-12 2万+
今天做项目时发现一个在元素绑定的事件不生效的问题，作此记录以提醒自己。具体代码如下： <el-button @click="clickFun">按钮111</el-button> <button @click="clickFun([1,2,3,4])">按钮222</button> import {getInfo} from './api/test.js' //api接口 export default { name: 'test', data(){
VUE中 @click 事件不生效
qq_35608652的博客
06-13 1万+
1，给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符） 2，等同于在自组件中： 子组件内部处理click事件然后向外发送click事件：$emit(“click”.fn) ...
今天遇到的bug——vue组件中添@click失效
m0_47807991的博客
04-14 2990
今天遇到了一个非常蠢的bug，在vue组件中添加click事件无效，@click.native也无效 想添加一个click事件来切换歌曲 <div class="playlist"> <div class="playItem" v-for="(item,i) in playlist.tracks" :key="item.id" @click="setPlayIndex(i)"></div> </div> 结果click事件一直无效，试了@cli
vue中在组件上使用@click事件无效
ld395353765的博客
01-14 2249
.native修饰符 el-row(:gutter="20") el-col(@click.native="testClick(index)") i(:class='item.iconClass',style='font-size:64px').iconfont p(style='margin:0') {{item.name}} p ￥{...
vue.js @click绑定点击事件不生效？
热门推荐
qq_39562867的博客
08-16 7万+
这个是在组件开发中遇到的问题，当时我在编写button的组件，模板是这样的： &lt;template&gt; &lt;button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongCl...
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 5459
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
hasInjectionContext" is not exported by "node_modules/.pnpm/registry.npmmirror.com+pinia@2.1.3_typescript@4.9.5+vue@3.3.4/node_modules/vue-demi/lib/index.mjs", imported by "node_ modules/.pnpm/registry.npmmirror.com+pinia@2.1.3_typescript@4.9.5+vue@3.3.4/node_modules/pinia/dist/pinia.mjs"
06-09
这是一个错误信息，看起来是在使用 Pinia 和 Vue.js 的过程中遇到的。...可能原因是你的 `pinia` 版本过低，不支持你使用的 `vue-demi` 版本。你可以尝试升级 `pinia` 或者降低 `vue-demi` 的版本来解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值