Vue+ElementUI动态切换验证规则(二)

最新推荐文章于 2024-09-19 09:45:04 发布

西格玛猫

最新推荐文章于 2024-09-19 09:45:04 发布

阅读量1.6k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43810973/article/details/106040451

版权

针对上篇出现的点击按钮切换验证问题，本文详细介绍了如何重新梳理Vue结合ElementUI的代码，实现表单验证规则的动态切换，提升用户体验。

摘要由CSDN通过智能技术生成

上一篇实际运行会出现点击按钮切换后自动验证的问题，影响用户体验。
重新梳理了代码：

表单

<template>
	<el-form :model="form" ref="ref">
		<el-form-item prop="a" :rules="aRules">
			<el-input v-model="form.data1"></el-input>
		</el-form-item>
		<el-form-item prop="b" :rules="bRules">
			<el-input v-model="form.data2"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button  @click="submit">提交</el-button>
		</el-form-item>
	</el-form>
</template>

脚本

<script>
export default {
	data () {
		return {
			// 判断条件
			condition: false,
			// 表单数据
			form: {
				data1: '',
				data2: ''
			},
			aRules: {},
			bRules: {}
		}
	},
	created() {
		this.init();
	},
	watch: {
		condition(val) {
			if (val) {
				this.aRules = [