el-form中的rules未生效的解决方法
更新时间：2023年02月02日 09:48:41 作者：宝贝QY
本文主要介绍了el-form中的rules未生效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
我们在使用elementUI库的时候，肯定要了解相关的api，但使用过程中明明和官方写法类似为什么自己的就是没有生效，在这里给大家讲解一下我在工作中碰到的一个小问题。
先给大家用图片和代码的形式展示遇到的问题及解决方案：
<el-dialog :visible.sync="dialogVisible" :show-close="false" :title="isEdit?'修改支付商品':'新增支付商品'" width="600px" top="8vh">
<el-form ref="ruleForm" :rules="rules" :model="ruleForm" status-icon label-width="120px" class="demo-ruleForm">
<el-form-item class="payment_item" label="产品名称：" prop="paymentProductName">
<el-input v-model="ruleForm.paymentProductName" size="mini" style="width:350px" placeholder="请输入产品名称"/>
</el-form-item>
<el-form-item class="payment_item" label="产品类型：" prop="paymentProductType">
<el-select v-model="ruleForm.paymentProductType" size="mini" placeholder="请选择" style="width:350px">
<el-option label="小程序开通" value="1"/>
<el-option label="核验币" value="0"/>
</el-select>
</el-form-item>
<el-form-item class="payment_item" label="产品描述：">
<el-input
:rows="2"
v-model="ruleForm.remark"
style="width:350px"
type="textarea"
placeholder="请输入内容"/>
</el-form-item>
<el-form-item class="payment_item" label="价格：" prop="paymentProductPrice">
<el-input-number
:precision="2"
:controls="false"
v-model="ruleForm.paymentProductPrice"
:min="0.01"
size="mini"
style="width:350px"/>
</el-form-item>
<el-form-item class="payment_item" label="数量：" prop="paymentProductNum">
<el-input-number
:precision="0"
:controls="false"
v-model="ruleForm.paymentProductNum"
:min="1"
size="mini"
style="width:350px"/>
</el-form-item>
<el-form-item class="payment_item" label="优惠：" prop="paymentProductGiveNum">
<el-input-number
:precision="0"
:controls="false"
v-model="ruleForm.paymentProductGiveNum"
size="mini"
style="width:350px"/>
</el-form-item>
<el-form-item class="payment_item" label="首充：" prop="isFirstPunch">
<el-radio v-model="ruleForm.isFirstPunch" :label="true">是</el-radio>
<el-radio v-model="ruleForm.isFirstPunch" :label="false">否</el-radio>
</el-form-item>
<el-form-item v-if="ruleForm.isFirstPunch" class="payment_item" label="首充描述标题：" prop="firstPunchTitle">
<el-input v-model="ruleForm.firstPunchTitle" size="mini" style="width:350px" placeholder="请输入首充描述标题" maxlength="15"/>
</el-form-item>
<el-form-item v-if="ruleForm.isFirstPunch" class="payment_item" label="副标题：" prop="firstPunchSubTitle">
<el-input v-model="ruleForm.firstPunchSubTitle" size="mini" style="width:350px" placeholder="请输入副标题" maxlength="30"/>
</el-form-item>
<el-form-item class="payment_item" label="配置渠道：" prop="rechargeChannel">
<el-select v-model="ruleForm.rechargeChannel" size="mini" placeholder="请选择" style="width:350px">
<el-option label="非IOS" value="0"/>
<el-option label="IOS" value="1"/>
</el-select>
</el-form-item>
<el-form-item class="payment_item" label="排序权重：" prop="sort">
<el-input-number :precision="0" :controls="false" v-model="ruleForm.sort" size="mini" style="width:350px"/>
</el-form-item>
</el-form>
<div slot="footer" style="text-align: center">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="submitHandler('ruleForm')">确 定
</el-button>
</div>
</el-dialog>data() {
return {
rules: {
paymentProductName: [
{ required: true, message: '请输入产品名称', trigger: 'blur' }
],
paymentProductType: [
{ required: true, message: '请选择产品类型', trigger: 'change' }
],
paymentProductPrice: [
{ required: true, message: '请输入产品价格', trigger: 'blur' }
],
paymentProductNum: [
{ required: true, message: '请输入产品数量' },
{ type: 'number', message: '产品数量必须为数字' }
],
paymentProductGiveNum: [
{ required: true },
{ type: 'number' }
],
isFirstPunch: [
{ required: true, message: '请选择是否是首充', trigger: 'change' }
],
firstPunchTitle: [
{ required: true, message: '请输入首充描述标题', trigger: 'blur' }
],
firstPunchSubTitle: [
{ required: true, message: '请输入副标题', trigger: 'blur' }
],
rechargeChannel: [
{ required: true, message: '请选择配置渠道', trigger: 'change' }
],
sort: [
{ required: true, message: '请输入排序权重' },
{ type: 'number', message: '排序权重必须为数字' }
]
}
}
},特别提醒，<el-form-item>中prop=“paymentProductName”的值一定要跟对应的v-model=“ruleForm.paymentProductName”一致，即两个“paymentProductName”得一样，否则会导致rules失效
碰到类似问题的同学相信看了上面的图片和代码应该有一种醍醐灌顶的感觉，工作中碰到的坑，小记一下。
到此这篇关于el-form中的rules未生效的解决方法的文章就介绍到这了,更多相关el-form rules未生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue.js实例对象+组件树的相关资料,需要的朋友可以参考下2017-10-10
最近项目里集成了百度地图的一些功能,所以下面这篇文章主要给大家介绍了关于前端小技能之Vue集成百度离线地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了在Vue中使用Echarts++封装,需要的朋友可以参考下2023-11-11
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定.这篇文章主要介绍了VueJs中的V-bind指令,需要的朋友可以参考下2018-05-05
这篇文章主要为大家介绍了vue中使用axios请求post接口,请求会发送两次原因解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要为大家详细介绍一下如何在Vue3中实现自定义指令，文中的示例代码讲解详细，具有一定的借鉴价值，需要的同学可以参考一下2022-07-07
这篇文章主要介绍了vue+axios 拦截器实现统一token的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 自定义右键样式的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-02-02
最新评论