vue表单验证rules国际化处理不能及时更新
有两种方式可以解决表单验证更新问题
第一种:通过computed属性
以基础表单为例,代码如下:
<template><div><el-form :model="form" :rules="rules" ref="form"><el-form-item :label="$t('form.Name')" prop="name"><el-input v-model="form.name" /></el-form-item></el-form></div>
</template>
<script>export default {data() {form:{name: ''}},computed: {rules() {const rules = {name: [{ required: true, message: this.$i18n.t('PleaseInputName'), trigger: blur}]}// 清空表单验证信息this.$nextTick( () => {this.$refs['form'].resetFields();})return rules;}}}
</script>
第二种:通过控制router-view的显示与隐藏,重渲染路由区域,达到页面刷新效果。代码如下
在App.vue中添加如下代码,可使项目所有表单都可以及时更新。
<template><div id="app"><router-view v-if="isActiveRoute" /> </div>
</template>
<script>export default {data() {return {isActiveRoute: true}},methods: {reload() {this.isActiveRoute = false;this.$nextTick( () => {this.isActiveRoute = true;})}},watch: {'$i18n.locale'(newVal, oldVal) {if(newVal != oldVal) {this.reload()}}}}
</script>
vue表单验证rules国际化处理不能及时更新相关推荐
- vue表单验证rules以及validator验证器的使用
为防止用户犯错,尽可能更早地发现并纠正错误. Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设 ...
- vue 表单验证按钮事件交由父组件触发
vue 表单验证按钮事件交由父组件触发,不直接再子组件上操作的方法 子组件: //内容部分 <Form ref="formCustom" :model="formC ...
- vue表单验证,不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
- vue表单验证,多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现 这里以antd 举例 <template><a-form-model ref="rule ...
- vue 表单验证并提交
vue 表单验证并提交 一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则 二.表单提交时验证 1.表单的提交按钮 2.ethods 方法 一.常用验证方式 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
- Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
- vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
最新文章
- php限定时间内同一ip只能访问一次
- java面试题(java基础)
- 一文了解HCIA考试相关问题
- Neo4j:在Neo4j浏览器的帮助下探索新数据集
- golang plugin模块的使用
- design php 如何使用ant_Ant Design Pro初探—添加面包屑
- bootstraptable查看详情_bootstrap-table前端实现多条件时间段查询数据
- Spring MVC拦截器的执行流程
- Atitit js nodejs下的进程管理wmic process进程管理
- Mybatis 插入与批量插入以及多参数批量删除
- 暴风影音使用技巧十则
- Altium Designer 17安装教程
- Hadoop面试试题
- html中文本框角度旋转,如何设置Word文本框旋转,任意角度调整文本框的方向?...
- 实验五 集线器和交换机的区别
- [VQA论文阅读]RUBi Reducing Unimodal Biases for Visual Question Answering
- python读数据库的通信协议是什么_Python中TCP协议的理解
- 图片裁剪上传插件—jquery.photoClip.js
- exchange2016邮件服务器配置,Exchange Server 2016客户端访问配置
- Java锁Synchronized对象锁和类锁区别(搬运)