ivew 动态表单验证和Property or method 字段 is not defined on the instance but referenced during render.

本文解决了iView UI框架中动态表单验证时出现的错误:Property or method字段is not defined on the instance but referenced during render。通过调整Vue的FormItem组件属性设置,确保prop属性正确配置,从而实现动态表单验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ivew 动态表单验证和Property or method 字段 is not defined on the instance but referenced during render.

问题:iview form表单验证
这里写图片描述

分析:先看一下官网的例子:
这里写图片描述
name

  <FormItem :prop="name" :rules="{required: true, message: '请填写付款人姓名', trigger: 'blur'}">
      <Input v-model="form.name" placeholder="请输入付款人姓名"></Input>
  </FormItem>

这样写出现了上面的错误:
解决办法:
先看一下官网的文档:
这里写图片描述

prop的类型是字符串,如果加上: 则:prop则的值为data定义的一个属性值,所以会报上面的错误
所以将:去掉,prop=”name”,”name”就是字符类型了或者:prop=” ‘name’ “在字段名上加单引号

 <FormItem prop="name" :rules="{required: true, message: '请填写付款人姓名', trigger: 'blur'}">
      <Input v-model="form.name" placeholder="请输入付款人姓名"></Input>
  </FormItem>
或者
 <FormItem :prop="'name'" :rules="{required: true, message: '请填写付款人姓名', trigger: 'blur'}">
      <Input v-model="form.name" placeholder="请输入付款人姓名"></Input>
  </FormItem>

再测试就没有上述的错误了,

总结:如果做动态的表单验证就可以利用这一点在FormItem 里面填写验证规则,做权限也可以使用这点

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值