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

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. 【Python入门教程】获取图片可视化精准定位(逆地理编码)

    ​ 使用exifread库读取图片的经纬度信息(WGS84坐标) 使用高德开放API将经纬度转为高德底图经纬度,并输出具体位置 使用folium库,以高德底图为基准,在网页上可视化显示地图和兴趣点 一 ...

  2. 【Python&GIS】判断图片中心点/经纬度点是否在某个面内

     Python的exifread库可以获取图片中的源数据信息,包括经纬度.相机厂商.曝光时间.焦距.拍摄时间.拍摄地点等等信息.我们可以通过exifread库从图片中获取图片的经纬度,再通过shape ...

  3. ChatGPT玩法(三):AI玩转PPT

    前言 在线免费体验ChatGpt:https://www.topgpt.one 作为许多职场人士的必备工具,PPT制作一直是一个琐碎而费时的任务.但最近我发现了一个非常有用的工具网站,它可以通过人工智 ...

  4. 从零玩转系列之微信支付实战PC端接口搭建

    一.前言 halo各位大佬很久没更新了最近在搞微信支付,因商户号审核了我半个月和小程序认证也找了资料并且将商户号和小程序进行关联,至此微信支付Native支付完成.此篇文章过长我将分几个阶段的文章发布 ...

  5. celery笔记六之worker介绍

    本文首发于公众号:Hunter后端 原文链接:celery笔记六之worker介绍 前面我们介绍过 celery 的理想的设计方式是几个 worker 处理特定的任务队列的数据,这样可以避免任务在队列 ...

  6. 使用MASA Stack+.Net 从零开始搭建IoT平台 第五章 使用时序库存储上行数据

    @ 目录 前言 分析 实施步骤 时序库的安装 解决playload没有时间戳问题 代码编写 测试 总结 前言 我们可以将设备上行数据存储到关系型数据库中,我们需要两张带有时间戳的表(最新数据表 和 历 ...

  7. 从零开始整SpringBoot-搭建一个企业级项目

    创建Springboot项目 在企业里的项目多数是分Modules的,更多是通过物理方式隔离层之间的职责. 首先按照原有新建SpringBoot项目创建,填好相关信息后,选择Java 8其他不用选. ...

  8. 根据模板动态生成word(三)使用poi-tl生成word

    @ 目录 一.前言 1.什么是poi-tl 2.官方信息 2.1 源码仓库 2.2 中文文档 2.3 开源协议 3.poi-tl的优势 3.1 poi-tl和其他模板引擎的对比 3.2 poi-tl ...

  9. JavaScript中this的绑定

    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path s ...

  10. FHQ-Treap的详细图解

    第一部分 按值分裂的 FHQ-Treap 按值分裂的 FHQ-Treap 的典型例题是P3369 [模板]普通平衡树. 思路 FHQ-Treap 是什么? FHQ-Treap 是二叉搜索树的一种. 比 ...