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里面这样写 完美 ...
随机推荐
- 如何获取 C#程序 内核态线程栈
一:背景 1. 讲故事 在这么多的案例分析中,往往会发现一些案例是卡死在线程的内核态栈上,但拿过来的dump都是用户态模式下,所以无法看到内核态栈,这就比较麻烦,需要让朋友通过其他方式生成一个蓝屏的d ...
- selenium4-获取页面元素相关信息
本小节我们简单说下如何使用selenium4-获取页面元素相关信息,以及获取页面元素的相关信息后可以做什么. 获取页面元素的主要目的:(1)执行完步骤后进行断言:(2)获取前一步骤的响应结果作为后续步 ...
- 混沌演练状态下,如何降低应用的 MTTR(平均恢复时间)
在企业业务领域,锦礼是针对福利.营销.激励等员工采购场景的一站式解决方案,包含面向员工.会员等弹性激励SAAS平台.由于其直接面向公司全体员工,其服务的高可用尤其重要,本文将介绍锦礼商城大促前夕,通过 ...
- NameError: name 'List' is not defined
当在python出现该问题是,使用from typing import List.
- @Deprecated注解的使用
被注解@Deprecated标记的程序元素是不鼓励使用的程序元素,通常是因为它很危险,或者是因为存在更好的替代方案. 除了对象自身引用自己用@Deprecated标记的方法外,其他情况使用@Depre ...
- 【Azure 应用服务】App Service for Container 无法拉取Docker Hub中的镜像替代方案
问题描述 创建App Service Container服务,选择从Docker Hub中获取appsmith/appsmith-ce 镜像(https://www.appsmith.com/ &am ...
- postgresql json取值为何这么慢?
一.缘起 慢sql分析,总行数80w+. 比较特殊的是:其中有个字段info是jsonb类型,写法:info::json->'length' as length 同样的查询条件查这个字段和不查这 ...
- 2023-06-22:一所学校里有一些班级,每个班级里有一些学生,现在每个班都会进行一场期末考试 给你一个二维数组 classes ,其中 classes[i] = [passi, totali] 表
2023-06-22:一所学校里有一些班级,每个班级里有一些学生,现在每个班都会进行一场期末考试 给你一个二维数组 classes ,其中 classes[i] = [passi, totali] 表 ...
- uni-app基于原生input增强选择picker插件 可用于地图定位选位置 页面跳转选数据
前端基于原生input增强选择picker插件 可用于地图定位选位置 页面跳转选数据, 下载完整代码请访问uni-app插件市场地址: https://ext.dcloud.net.cn/plugin ...
- 【java-Err】 Generating equals/hashCode implementation but without a call to superclass,
@EqualsAndHashCode 默认不继承父类 修复此问题的方法很简单: 1. 使用@Getter @Setter @ToString代替@Data并且自定义equals(Object ot ...