【使用VUE3.0+Antd-Vue+JS写from表单提交无反应】（html-type=“submit“）

最新推荐文章于 2024-08-25 14:53:52 发布
最新推荐文章于 2024-08-25 14:53:52 发布
阅读量1.3k 收藏
点赞数
分类专栏： 问题解决 文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44431812/article/details/122545846
版权

在使用VUE3.0+Antd-Vue+JS写from表单，在写
<a-button type="primary" html-type="submit" block>注册</a-button>
在页面中点击但没有翻反应，@finish也没有错误 在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
最后我才发现！这里应该是:model，而不是:v-model
在这里插入图片描述

表单Form的submit事件不响应的解决方法
12-10
一、问题描述 类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。 不响应事件的代码示例： [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 实际运行，不会有alert出来。 虽然用submit方法来提交表单有违Unobtrustive Javascript的原则，但有时候不得不用，比如做搜索提示（auto-complete)选中Item之后就需要用JS来提交搜索表单。 二、问题分析 既然本身不响应事件，那只有手工触发这些事件了，确定手工触发方案之前先回顾一下事件的注册方式： “原始”的注册方式有两
form.submit()不起作用
zhaoyi105的专栏
03-05 2078
原因：在form表单内，有标签命名为submit
vue watch 第一次不执行
m0_37568655的博客
04-12 1462
vue watch 第一次不执行： 提示：vue watch 第一次不执行 例如：项目场景：在watch中调用methods中的方法，第一次没有执行 问题描述： 例如：在vue子组件watch中监听父组件props传入的info数据，但this.echartsFun()第一次并没有执行，第二次之后都有执行 APP 中接收数据代码： watch:{ info(){ console.log('watch') this.echartsFun() }
antd 的form表单submit提交不生效_快速了解JavaScript的表单操作
weixin_28676397的博客
01-28 2131
前言在 HTML 中使用 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型，而HTMLFormElement继承了HTMLElement接口：interface HTMLFormElement extends HTMLElement { ...}因此，HTMLFormElement 除了与 HTMLElement有一样的属性和方法外，还有自己独有...
vue表单提交
weixin_36004294的博客
08-10 5947
vue的表单提交需要基于vue-resource                           姓名：                                      性別：                             男                                         
vue3-提交数据和路由跳转
menghuannvxia的专栏
08-11 1831
vue表单提交和路由跳转
form表单用js提前执行函数若不成功则不提交_使用Vue Composition API写出清晰、可扩展的表单...
weixin_40004081的博客
11-22 248
表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。基于组件的框架，如 Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。在本教程中，将向您展示新的 Vue Composition API(即将加入 Vue 3 中)如何使表单代码更清晰、更具可扩展性。为什么表单代码经常很烂 像 Vue 这种基于组件的框架的关键设计模式是组件组合。这种模式将应...
使用vue3封装antd-vue的from表单
05-13
首先，你需要安装 `ant-design-vue` 和 `vue3` 。 ``` npm install ant-design-vue@next npm install vue@next ``` 然后，你可以创建一个表单组件 ...现在，我们就可以在 Vue 3 中使用 Ant Design Vue 的表单组件了。
Ant-Design-Vue快速上手指南+排坑
破损的天堂鸟博客
08-24 1921
Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件库，适用于各种类型的 Web 应用开发。
vue2+ant-design-vue项目，想要使用formily，给一个能够运行的详细操作步骤
最新发布
03-09
<button type="submit"@click.prevent="handleSubmit()">提交 </a-form-model> export default { data() { return { formData: {}, }; }, methods:{ handleSubmit(){ this.$refs.form.validate()....
vue3-form-usage：使用vue3的表单用法
02-07
vue3形式使用 使用vue3的表单用法
Vue + antd 实现修改密码 前端校验
Joanna_7471的博客
02-19 2405
今天写的一个新的需求就是给系统增加修改密码功能，前端也需要做一个校验。如下图： 新密码不能与旧密码相同 确认新密码要与上一次输入一致 实现如下： 首先用的是antd的formModal表单组件 <a-form-model :model="form" :rules="rules" ref="form" layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
CRPER
04-10 7226
前言 这次的后台管理系统项目选型用了Vue来作为主技术栈； 因为前端时间用过React来写过项目(用了antd)，感觉很棒棒。 这次就排除了Element UI,而采用了Ant Design Vue; 分析整个项目原型后，发现又可以抽离类似之前的React表格搜索组件 React 折腾记 - (6) 基于React 16.x+ Antd 3.封装的一个声明式的查询组件(实用强大) 效果图 响...
vue--html
userzou的博客
05-24 298
引入vue的js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> </body> </h
antd 的form表单submit提交不生效_论如何搭上 antd 的快车-Form 篇
weixin_42550750的博客
01-30 3135
有些人写的文章叫做教程有些人写的文章叫做科普而我写的文章多半是篇水贴9012 年写的太少了，我的 2020 的 flag 之一是写 2 篇文章，然后前几天看到别人立的 flag 是写100 篇文章，那咋办，我也不能输啊，于是我决定把我原本想写的 2 篇文章，拆成 200 篇。“输人不输阵,输阵歹看面“，Over！当然如果你的项目中允许你直接使用 antd 的组件，那是很舒服，无论是 3.0 的Fo...
vue3 中使用原生form表单，如何触发submit提交表单？
技术前端，忠于热爱 @回忆哆啦没有A梦
10-13 6610
vue3 中使用form表单，如何触发submit提交表单？在和银行对接的项目中，遇到的问题。根据银行的技术文档要求，需要前端通过from表单，提交到指定action地址。 所以就需要在vue中触发from的submit提交表单操作。
详解Vue3中的常见的监听事件submit、mouseenter和mouseleave
一起学习
12-30 3911
本文主要介绍Vue3中的常见的监听事件submit、mouseenter和mouseleave。
Button HtmlType 在 React Antd 中的实践不用写 form.resetFieldsValue() 辣
Constantiny的博客
06-15 730
Button组件的 htmlType 属性用于指定按钮的 HTML 表单类型。这个属性可以控制按钮在表单提交时的行为。submit：将按钮作为表单的提交按钮。当用户点击该按钮时，会触发表单的提交操作。reset：将按钮作为表单的重置按钮。当用户点击该按钮时，会将表单中的输入字段重置为初始值。button：将按钮作为普通按钮。这是默认的 htmlType 值，点击该按钮不会触发表单提交或重置操作。
使用Vue3实现响应式表单验证
有我更精彩的博客
08-25 939
通过本文的介绍，我们成功地使用Vue 3和Composition API实现了一个具有响应式特性的表单验证系统。随着你的项目越来越复杂，你可能需要更详细的验证逻辑，也许可以考虑引入表单库如VeeValidate等。掌握Vue 3的特性将助力你构建出更为流畅高效的用户交互体验。最后问候亲爱的朋友们，并邀请你们阅读我的全新著作书籍详情。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zmsup

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值