【Bug记录】Vue绑定按钮点击事件不生效，控制台不打印信息

最新推荐文章于 2023-05-07 11:43:07 发布
最新推荐文章于 2023-05-07 11:43:07 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： Bug记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43647384/article/details/114703202
版权

目录

一、问题描述

作为刚入门Vue小白的我，在使用Vue进行登录表单按钮绑定点击事件的时候，发现其方法没有执行。一点击按钮就会重新刷新页面。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
    <div class="
最低0.47元/天 解锁文章
翱翔于世纪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 打印_vue小技巧之全局设置console开关去掉打印
weixin_39815345的博客
12-12 1650
方法1如果你用的是vscode全局替换console.log为//console.log这种方法有点emmmmmm。。。。不太优雅方法二替换window的console方法为{}，在main.js里面// window['console']['log'] = console.log() //打开默认设置window['console']['log'] = function() {}; ...
解决vue中给button按钮添加点击事件，事件不生效问题。
热门推荐
Banality_human_workers的博客
06-15 1万+
解决vue中给button按钮添加点击事件，事件不生效问题。 话不多说，直接切入正题： 我们在开发中是不是经常会遇到给button或者input添加click事件，但是methods中却不走这个事件的问题呢？ 我找了很多文档，跟button本身是没有关系的。 话不多说 看代码： <div class="parentbox"> <div class="childbox"> <button @click="addEvent">测试</but
解决input的blur事件后button的click不执行的问题
mossbaoo的博客
11-09 3269
我当时场景是微信小程序，在input中输入内容后，再点提交按钮，评论窗口隐藏了，但是提交的事件没有触发。 这里的要求是：     1. input失去焦点时，需要评论窗口隐藏     2. 点击提交按钮后，既要提交，也要隐藏评论窗口 当时的代码是： &lt;div class="actionArea" v-if="isComment"&gt; &lt;input type="tex...
Vue点击事件失效
weixin_41219240的博客
10-26 1万+
在做项目时给button添加click事件，发现没反应，但另外写了一个button添加同样的事件，却能触发。 原因是使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true 例： mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: ...
BUG记录-VUE2.0 重置按钮不生效。
Eternity_Lang的博客
05-22 3065
问题描述：重置按钮点击，表单数据没有重置vue↓重置方法↓原因：el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。解决方式：el-form-item添加prop属性，属性值为相应组件的值结果：可以重置，但是两个日期框没有重置原因：我把两个日期框放在了一个el-form-item中...
vue3生产环境配置不打印console.log
黎小小的博客
04-27 1286
把配置写道vue.config.js里了。
vue中的echarts对象绑定click事件无法调用vue的实例对象
MistyWood的博客
05-26 2134
this.fanChart.on('click', function(params) { this.getData(params.data.code); }) 在vue里使用echarts时，需要在绑定click事件触发vue的函数，用this引用后总是找不到对象或者函数 解决方法： 用箭头写法就可以了 this.fanChart.on('click', (params)=> { this.getData(params.data.code); }) ...
对按钮添加绑定事件后点击按钮没反应--------对按钮添加单击事件时注意的问题
qq_56366181的博客
11-22 1853
```javascript <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript"> $(fun.
Chrome浏览器console.log无法打印日志
weixin_42260782的博客
12-28 2059
在调试前端程序的时候，发现无法打印日志在浏览器控制台，框架用的是vue3.x，但是window.console.log无法打印 网上解决方法很多，基本都是设置问题 但是都无法解决，后来才发现是插件的问题，莫名其妙的多了个网购插件，估计屏蔽掉了打印功能，把它关闭即可 这里附上其他解决方法的链接： Chrome浏览器console.log不输出 html5 log,Console.log不输出信息？ ...
解决Vue router-link绑定事件不生效的问题
10-15
主要介绍了解决Vue router-link绑定事件不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue绑定的点击事件阻止冒泡的实例
08-28
vue绑定的点击事件阻止冒泡的实例 在本篇文章中，我们将探讨如何在 Vue 中绑定点击事件，并阻止事件冒泡。事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标...
解决vue 绑定对象内点击事件失效问题
12-12
突然的发现某段 html 代码中点击事件失效了。 仔细观察才发现，这段代码内的...以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决vue项目input输入框双向绑定数据不实时生效问题
10-15
总之，解决Vue项目中input输入框双向绑定数据不实时生效的问题，通常需要利用`this.$set`确保数据的响应性，或者调整`v-model`的绑定方式。而在处理`v-for`循环时，应确保`key`的唯一性和正确性，以避免编译错误或...
解决vue addRoutes不生效问题
10-14
在Vue.js应用中，`vue-router`是官方推荐的路由管理库，用于处理单页应用(SPA)的页面切换和导航。在某些情况下，我们可能需要动态添加路由，例如根据用户的权限来决定显示哪些页面。这通常涉及到`addRoutes()`方法的...
vue动态添加按钮及对应事件
weixin_42088314的博客
05-25 2983
这里的按钮用的是element的button <div class="btn" v-for="(btn, index) in buttonList" :key="index"> <el-button :type="btn.type" @click="btnEvent(btn.btnEvent)" :icon="btn.icon" > {{btn.name}} </el-button> </div> //定义按钮
vue问题：router-link中的tag没有生效
weixin_44222717的博客
02-27 3477
原因：没有将router挂载 解决方法： 在main.js中加入以下代码 import router from './router/index' new Vue({ router }).$mount('#app')
console.log无法打印问题
weixin_45773788的博客
06-26 1万+
本人遇到情况：vue项目中watch监听器监听绑定事件，console.log在控制台无显示，尝试alert正常。可能原因一：浏览器过滤条件问题（网上最常见的原因但本人并不是） 解决方案：左侧top栏选择info，默认级别（Default levels）中信息选项（info选项）要勾选，筛选器中清空。可能原因二（本人遇到的原因查了很久）：浏览器扩展程序问题。解决方案：亲测删除多余扩展后（云文档等）功能恢复正常，在另一浏览器上也是如此，都是存在云文档这一扩展程序导致console.log打印失效。...
火狐浏览器vue 中的console.log()不显示结果
iang_520的博客
05-07 565
今天在测试生命周期函数时，将控制台打印console写在钩子函数中，但是后台打印不出来，火狐浏览器vue 中的console.log()不显示结果，最后发现时我把钩子函数写在了methods:{}中了，应该写在methods下面，与之并起，如下。
vue中新增和编辑两个功能共用一个弹窗和弹窗确定按钮，调用接口的处理方式（一）--- 同一个vue页面
weixin_43312391的博客
04-20 9000
实现目标：点击新增和编辑按钮时出现同一个弹窗，但展示信息不同，分别对接新增和编辑接口。 直观效果： 前端页面中的新增和编辑按钮 点击新增按钮出现的弹框： 点击编辑出现的弹框： 新增和编辑均是通过确定按钮来对接接口。 后端swagger： api下的js文件： // 新增 export function insertMaterial(param) { return request({ url: '/xxxx/xxxxx/insert', .
如何将注册页面的信息发送到控制台并且还要阻止表单提交，控制台拿到的数据然后保存到数据库
最新发布
07-14
要将注册页面的信息发送到控制台、阻止表单提交，并将数据保存到数据库，你可以结合前面提到的 JavaScript 和 Express 框架来实现。 首先，确保你已经安装了 Express 和适用于你的数据库的相应模块（如 `mysql`、`mongodb`等）。 下面是一个示例代码： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const mysql = require('mysql'); // 假设使用 MySQL 数据库 const app = express(); app.use(bodyParser.urlencoded({ extended: false })); // 创建与数据库的连接 const connection = mysql.createConnection({ host: 'localhost', user: 'your_username', password: 'your_password', database: 'your_database' }); // 连接数据库 connection.connect(function(err) { if (err) { console.error('Error connecting to database:', err); return; } console.log('Connected to database!'); }); // 处理注册页面的 POST 请求 app.post('/register', function(req, res) { const name = req.body.name; const password = req.body.password; const email = req.body.email; console.log('注册信息:'); console.log('用户名:', name); console.log('密码:', password); console.log('邮箱:', email); // 将数据保存到数据库 const query = `INSERT INTO users (name, password, email) VALUES (?, ?, ?)`; connection.query(query, [name, password, email], function(err, result) { if (err) { console.error('Error saving data to database:', err); return; } console.log('数据已保存到数据库!'); }); res.send('注册成功！'); }); app.listen(3000, function() { console.log('Server is running on port 3000'); }); ``` 在上面的代码中，我们使用了 Express 框架来创建一个简单的服务器应用。我们通过调用 `app.post()` 函数来处理注册页面的 POST 请求。 在处理请求的函数中，我们获取了用户提交的用户名、密码和邮箱，并将其输出到控制台。然后，我们使用数据库连接对象 `connection` 执行 SQL 查询，将数据保存到数据库中。 请注意，上面示例中使用的是 MySQL 数据库，你需要根据你实际使用的数据库类型进行相应的修改。 最后，我们通过调用 `app.listen()` 函数来启动服务器，并监听在端口 3000 上。 当用户在注册页面提交表单时，数据将被发送到控制台并保存到数据库中。你可以根据需要在这里进行其他操作，例如返回一个成功的响应给客户端或执行其他的业务逻辑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值