表单提交向别的组件传参失效

methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!'); //这句话至关重
this.$router.push("/test/"+this.numberValidateForm.age)
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}

路由传参格式

//带参转跳
<router-link to="/cr">children-router</router-link><router-link :to="{name:'Test',params:{age:numberValidateForm.age}}">test</router-link>
<el-menu-item index="4" :index="'test/1'" > //不带参转跳
<el-menu-item index="4" :index="'test'" >
//转跳至 http://localhost:8080/#/test?age=1
<el-menu-item index="4" :route="{ path: '/test', query: { age:1 }} ">

elementui vue表单提交向别的组件传参失效 路由传参格式的更多相关文章

  1. 如何用elementui去实现图片上传和表单提交,用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  2. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  3. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  4. anular2 表单包含多个组件并验证提交

    angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证. <form [formG ...

  5. vue之回车触发表单提交

    vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...

  6. django 使用form组件提交数据之form表单提交

    django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...

  7. vue表单校验(三)

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  8. vue---阻止默认表单提交的三种方法

    vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...

  9. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  10. vue表单验证不通过,依然能执行点击事件里面的代码?

    遇到的问题:表单提交的时候,写了rules,明明验证不通过依然执行了点击事件里面的代码. 这个验证有什么用? 后来 我看elementUI组件才发现,我漏写了几行代码. methods里面这样写 完美 ...

随机推荐

  1. PHP反序列化字符逃逸 学习记录

    PHP反序列化字符逃逸的原理 当开发者使用先将对象序列化,然后将对象中的字符进行过滤, 最后再进行反序列化.这个时候就有可能会产生PHP反序列化字符逃逸的漏洞. 详解PHP反序列化字符逃逸 过滤后字符 ...

  2. CSS 图片加载提前占位 padding-top、padding-bottom

    今天聊一个图片加载提前占位的一个问题 ,内容比较适合初学者. 起因 在响应式页面当中,图片加载之前是不知道图片高度的,加载成功图片完全撑开.如果不做提前占位会把下面的内容挤下去,页面出现抖动,就像下面 ...

  3. List转为Map

    List转为Map 1.业务需求,需要将List<SysSetting>转为Map SysSetting是一个对象 @Data @TableName("t_sys_setting ...

  4. gitlab docker升级报错

    背景 使用docker部署gitlab(9.5.4)后,发现合并代码有问题 日志: 看gitlab官网此问题已修复,由于上传了一批代码,又懒得重建,决定对gitlab升级 docker启动命令: do ...

  5. Airtest图像识别测试工具原理解读&最佳实践

    1 Airtest简介 Airtest是一个跨平台的.基于图像识别的UI自动化测试框架,适用于游戏和App,支持平台有Windows.Android和iOS.Airtest框架基于一种图形脚本语言Si ...

  6. To ChatGPT:让你更加随意地使用所有ChatGPT应用

    现在其实已经有很多在线的llm服务了,当然也存在许多开源部署方案,但是不知道大家有没有发现一个问题,目前基于ChatGPT开发的应用,都是使用的OpenAI的接口.换句话说,如果没有OpenAI账号, ...

  7. SAP ABAP 动态结构实现发送企业微信应用消息

    企业微信官方接口: 应用支持推送文本.图片.视频.文件.图文等类型. 请求方式:POST(HTTPS)请求地址: https://qyapi.weixin.qq.com/cgi-bin/message ...

  8. JavaCV人脸识别三部曲之一:视频中的人脸保存为图片

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于人脸识别 本文是<JavaCV人脸识别三部曲 ...

  9. 如何使用CCXT交易数字货币现货

    更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 数字货币现货标准化接口 数字货币市场与股票.期货市场最大的不同点在于数字货币主流交易所数量很多.举个例子 ...

  10. 文心一言 VS 讯飞星火 VS chatgpt (64)-- 算法导论6.5 3题

    文心一言 VS 讯飞星火 VS chatgpt (64)-- 算法导论6.5 3题 三.要求用最小堆实现最小优先队列,请写出 HEAP-MINIMUM.HEAP-EXTRACT-MIN.HEAP DE ...