elementui vue表单提交向别的组件传参失效 路由传参格式
表单提交向别的组件传参失效
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表单提交向别的组件传参失效 路由传参格式的更多相关文章
- 如何用elementui去实现图片上传和表单提交,用axios的post方法
下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- anular2 表单包含多个组件并验证提交
angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证. <form [formG ...
- vue之回车触发表单提交
vue之回车触发表单提交 操作: 在From标签中添加: @keyup.enter.native="handleSubmit" 注意: 1.若添加在Input标签上,只有聚焦在该i ...
- django 使用form组件提交数据之form表单提交
django的form组件可以减少后台在进行一些重复性的验证工作,极大降低开发效率. 最近遇到一个问题: 当使用form表单提交数据后,如果数据格式不符合后台定义的规则,需要重新在前端页面填写数据. ...
- vue表单校验(三)
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- vue---阻止默认表单提交的三种方法
vue在做表单提交的时候,需要用到一些自定义的验证规则,这个时候就需要阻止表单默认的提交方式. 方法一:直接阻止 <form id="form" @submit=" ...
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- vue表单验证不通过,依然能执行点击事件里面的代码?
遇到的问题:表单提交的时候,写了rules,明明验证不通过依然执行了点击事件里面的代码. 这个验证有什么用? 后来 我看elementUI组件才发现,我漏写了几行代码. methods里面这样写 完美 ...
随机推荐
- R 包初学者指南
由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文中链接. 基于 11 个最常见的用户问题介绍 R 软件包. R 包是由社区开发 (developed b ...
- 前端vue基于echart实现散点图
前端vue基于echart实现散点图, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=12866 效果图如下: 参考代码如 ...
- Dash应用页面整体布局技巧
本文示例代码已上传至我的Github仓库:https://github.com/CNFeffery/dash-master 大家好我是费老师,对于刚上手dash应用开发的新手朋友来说,如何进行合理且美 ...
- 4. JDK相关设置
恐惧是本能,行动是信仰(在此感谢尚硅谷宋红康老师的教程) 1. 项目的 JDK 设置 File-->Project Structure...-->Platform Settings --& ...
- GPT3的应用场景:从文本生成到智能推荐
目录 1. 引言 2. 技术原理及概念 2.1 基本概念解释 2.2 技术原理介绍 2.3 相关技术比较 3. 实现步骤与流程 3.1 准备工作:环境配置与依赖安装 3.2 核心模块实现 3.3 集成 ...
- Python史上最全种类数据库操作方法,你能想到的数据库类型都在里面!甚至还有云数据库!
本文将详细探讨如何在Python中连接全种类数据库以及实现相应的CRUD(创建,读取,更新,删除)操作.我们将逐一解析连接MySQL,SQL Server,Oracle,PostgreSQL,Mong ...
- Java实现数组去重复的18种写法
说明 数组(含List)去重复在日常工作中经常遇到,很多时候用到Set数据结构,但有时候我们需要针对数据进行干预,这时候就需要用其他的实现方式了.以下列出各种的去重方式,基本含括了所有情况. 源码下载 ...
- AI回答打鸟问题
GPT-3.5 树上有9只鸟,猎枪打下来1只,还剩几只? 如果猎枪打下来1只鸟,那么树上剩下的鸟应该是8只.
- 2021-7-11 Vue的计算属性和侦听器
计算属性是为了让页面显示更加简洁,基于data数据进行处理的方法,以下为实例 <!DOCTYPE html> <html> <head> <title> ...
- sql-lab通关
page1-less1-22 联合查询 第一关 发现是有回显的,且传入的参数是通过'1'包裹的,所以我们的payload,如下 测试列数 ?id=1' order by 3 --+ //超过第一条语句 ...