Element form表单使用v-if prop属性失效问题 Cannot read properties of undefined (reading ‘index0f‘)“found in

最新推荐文章于 2024-05-30 15:07:12 发布
最新推荐文章于 2024-05-30 15:07:12 发布
阅读量467 收藏 8
点赞数 9
分类专栏： 前端 文章标签： 前端 javascript html elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42950632/article/details/135034025
版权

首先第一个问题 form表单使用v-if导致prop属性失效的问题。

同样都是使用v-if 就唯独这个属性失效了，其他都好的。 在这种情况使用v-if可以加个key来解决这个prop属性失效的问题。

第二个解决方法就是使用v-show 在某种条件下不去验证：如下

尽量在操作开销较大的情况下使用v-show 一定要区分场景使用v-if v-show

第二个问题就是清空表单的方法 报错：如下

这个问题应该是混乱了，在条件渲染的时候把不该有的prop继承过来了所以在清除的时候会报这个错，也是使用v-if引起的。在开发中尽量写严谨点。避免不必要的bug。

以上如有不对还请指正！  有知道这个问题是什么原因的请大佬解答一下疑惑。谢谢！

前端-王富贵
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件中watch props根据v-if动态判断并挂载DOM的问题
12-29
问题复现：父组件中通过名为 source 的 prop 向子组件 Chart 传入数据 <Chart source=chartData></Chart> import Chart from '../components/Chart' export default { name: 'Home', components: { Chart }, data () { return { chartData: [] } }, mounted () { setTimeout(() => { this.chartData = [ [89.3, 58212,
使用element-ui +Vue 解决 table 里包含表单验证的问题
12-28
应用场景： 在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示： 这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ + scope.$index + ‘.字段名'” 方法一： <template> <div class=app-container> <el model=fromData ref=from> <el data=fromData.domains> <el-table-colum
vue中使用element-ui进行表单验证的实例代码
12-29
element-ui 中验证 一、简单逻辑验证（直接使用rules） 实现思路 •html中给el-form增加 :rules=”rules” •html中在el-form-item 中增加属性 prop=”名称” •js中直接在data中定义rules:{} •html部分 <el-input class=inp v-model=form.
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
12-28
问题： 使用this.$ref[‘form’] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 </e
ant-design-vue的a-form-model表单，a-form-model-item项用v-if切换时，校验不生效问题
weixin_40992252的博客
11-09 730
原始代码确认校验代码。
v-if 导致 elementui 表单校验失效问题解决
jiangjunyuan168的博客
01-25 1133
在使用 elementui 表单的过程中，某些表单项需要通过 v-if 来判断是否展示，但是这些表单项出现了检验失效的问题。 1、给需要 v-if 判断的表单项添加 key 值 2、将校验规则直接绑定在 el-form-item 上 3、v-show 代替 v-if 这种方法存在一个问题，就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题，所以这种方法需要在判断的表单项字段都不相同的情况下使用。
vue 表单在用到 v-if，表单校验不生效
宁夏前端工程师，马卫斌，wx：1457508895
03-24 887
而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。因为在v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况（同理，所以 v-for 渲染的标签也要加key来区分）。最近在用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；
解决：v-if条件切换时，input框输入值未清空
weixin_45121510的博客
10-23 2740
用 key 管理可复用的元素： Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换： <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template&gt
element表单组件使用v-if控制item显隐时，表单校验不生效的问题
weixin_51409195的博客
11-08 1163
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"/>此处修改了v-if的条件之后，由显示变隐藏再使其显示，就出现了错误。输入了值以后还是一直提示未输入，尝试修改代码将v-if改成v-show之后突然发现可以了。aaa: [{ required: true, message: "请输入名称", trigger: "blur", }, ],
vue使用Element组件时v-for循环里的表单项验证方法
01-19
首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。...
vue项目中使用element中的el-form,可能会报错Cannot read properties of undefined (reading ‘indexOf’)
m_uncle的博客
12-23 4437
报错Cannot read properties of undefined (reading ‘indexOf’)
前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘)
热门推荐
老衲的少女心i~
02-23 8万+
目录前言一、报错截图？二、使用步骤总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、报错截图？ 这里是我在项目中产生报错的截图： 报错的原因： 这个是使用了undefined或者null的值进行了.attrname或者解构造成的 二、使用步骤 该处使用的url网络请求的数据。 总结 提示：这里对文章进行总结： 例如：以上就
通过v-if渲染的element-ui表单，校验规则不生效的问题
maoge_666的博客
04-18 504
通过v-if渲染的element-ui表单，校验规则不生效的问题
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 332
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 409
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 875
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 215
练习JS的实用案例
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 770
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
el-form resetForm Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'indexOf')"
08-18
这个错误通常是因为 `resetForm` 方法中的某个操作出现了问题。可能是因为表单校验规则或者表单字段定义不正确导致的。 请确保以下几点： 1. 确保在 `resetForm` 方法中正确调用了 `this.$refs.form.resetFields()`，其中 `form` 是你 el-form 的 ref 名称。 2. 检查你的表单字段定义和校验规则是否正确。确保每个字段都有正确设置 `prop` 属性和相应的校验规则。 这是一个示例的 el-form 代码，你可以参考它来检查你的代码： ```html <template> <div> <el-form ref="myForm" :model="form" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { name: '', email: '', }, rules: { name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱', trigger: ['blur', 'change'] }, ], }, }; }, methods: { submitForm() { this.$refs.myForm.validate((valid) => { if (valid) { // 表单校验通过，提交表单逻辑 // ... } else { // 表单校验不通过，进行提示等处理 // ... } }); }, resetForm() { this.$refs.myForm.resetFields(); }, }, }; </script> ``` 确保以上步骤都正确执行后，应该就能解决这个错误。如果问题仍然存在，请提供更多的相关代码和错误信息，以便更详细地分析问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值