关于 v-show 和 v-if 对表单校验的影响

最新推荐文章于 2024-01-25 11:04:31 发布

原创最新推荐文章于 2024-01-25 11:04:31 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细对比了Vue中v-show和v-if指令在处理表单控件时的不同行为，特别是在校验方面的影响。v-show仅隐藏控件而不销毁，保留的校验仍可能干扰程序执行；而v-if则完全移除控件，避免此类问题。

v-show (只是隐藏控件 , 不是将其销毁 )

当表单控件上使用 v-show 时如果加了校验即使表单控件隐藏了校验效果还会存在影响程序继续执行

v-if ( 直接将控件销毁 )

当表单控件上使用 v-if 时就算被销毁的控件上加了校验也不会影响程序继续执行

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

长发飘飘.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Element中table使用v-show不生效，使用v-if生效

Only No.1

10-29

5979

今天同事在开发中遇到一个问题，就是使用table中的type控制表格中两列，其中一列显示另一列则隐藏，同时位置有所改变，在切换tab中，发现一个bug就是tab切换到第二次的时候，显示是对的但是位置发生了变化。当时我感觉频繁操作建议让他改成v-show，结果发现没生效，主要是因为table中的td，diplay:table-cell,权限高于display:none,导致v-show失效。后面只能改成v-if,考虑到dom操作过程中，无法识别相同dom标签,导致重复使用td,需要对标签添加ke

van-field表单验证并且跳转到验证错位位置

m0_46577631的博客

09-17

3576

van-field的表单验证 HTML部分 <van-form ref="infoForm" <van-field label="姓名" required maxlength="10" name="nameValue" v-model="nameValue" placeholder="请输入姓名" :rules="[{required:true,trigger:‘onSubmit’,message:’请输入姓名'},

参与评论您还未登录，请先登录后发表或查看评论

vant 组件单选框用v-if 控制显示隐藏会有bug，所以采用v-show

贵林之恋的博客

11-19

3714

<template> <div class="wrapper paddingTop"> <preview v-if="show" :infoPreview="infoPreview" @cancel="show = false" @confirm="confirm" ></preview> <top-nav></top-nav> <van-f...

Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题

鸭绒的博客

04-10

3488

说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz

v-if与v-show对表单验证的影响以及解决办法

csdnyp的博客

04-08

3846

v-if与v-show控制元素显隐对表单验证的影响

el-form动态表单切换导致的校验bug（v-if、v-show导致校验失效的bug）

最新发布

09-30

在 Vue + Element UI 中，当使用 `v-show` 控制表单元素显示隐藏时，即便表单元素不可见，它仍然可能会参与校验。以下是几种解决办法： ### 动态绑定 `rules` 属性可以根据 `v-show` 的条件动态绑定表单元素的 `...

vue+ele v-show 表单校验有数据但是不通过校验

09-30

在 Vue + Element UI 项目里，使用 v-show 时表单有数据但校验不通过，可参考 v-if 相关情况来分析。使用 v-if 动态渲染 el-form 等元素时，底层虚拟 DOM 渲染时 Vue 会高效渲染元素，常复用已有元素，且 element-ui...

element ui 表单使用v-if切换导致校验规则失效的解决方案

ljw_Josie的博客

05-25

4800

现象我用v-if切换单选，会导致已经绑定的校验规则失效。代码解决方案方案很多，这里先贴出4种方案一：给每个item加一个key作为区分因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if渲染组件节点diff后被复用了，所以验证也就自然失效了方案二：直接在item里写rules 方案三：使用校验函数方案四：在外层包两层div ...

el-form动态表单验证（v-if、v-show导致校验失效的bug）

YSD2468的博客

04-13

2814

今天同事遇见一个很奇怪的问题，vue里面element form表单验证有一个不生效。一开始我以为是prop没绑定或者绑定错了 ![验证不生效](https://img-blog.csdnimg.cn/20200413202247674.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cH...

form表单验证影响使用v-show还是v-if？

weixin_53877433的博客

10-19

520

form表单验证

iview 表单验证，隐藏显示的表单之后验证信息依然存在解决办法

weixin_43779406的博客

01-07

2112

根据选择不同的值，下方的显示表单也发生变化，但是原先的验证信息并没有完全清除，如图解决办法第一种，可以在改变事件中清除验证 changeType(val) { this.$refs['form'].resetFields(); } 第二种方法，可以给验证的每个表单绑定一个唯一的key值 <FormItem label="用户名" prop="userName" v-if="isShow" key="1236"> <Input type="text" v.

表单校验隐藏的输入框显示才校验

hfyldx的博客

07-28

559

表单校验

element ui form表单项显隐，校验（不该）触发问题

zhl_cafe的博客

09-07

3687

element ui form表单项显隐，校验（不该）触发问题。

van-tab切换van-form表单时,显示前一个表单的错误校验

小迪的博客

03-21

712

bug场景描述: 利用tab切换表单时,表单校验会携带 van-tab利用v-if来控制隐藏和显示van-form表单给每个表单添加一个:key=’’ ‘’,以此来区分form表单,从而让vue清空错误校验

vue+elementui 表单中有个按照条件隐藏组件校验判断

ldqwananxh的博客

12-06

5002

遇到了vue+elementui 表单中有个按照条件隐藏的下拉框，隐藏的时候不需要校验，显示的时候需要校验，下面代码将purchaseType隐藏显示操作，自定义验证方法validatePurchaseType 这里 !this.showRentPrise作为条件然后在判断传进来的值进行校验即可 data() { const validatePurchaseType = (rule, value, callback) => { debugger

【VUE的Form表单】使用v-if切换控件时，表单校验不生效

weixin_55846296的博客

09-29

3675

【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效

uView表单校验v-if

03-14

### uView 表单验证与 `v-if` 的实现方法在 Vue 和 uView 组合使用的场景下，对于带有 `v-if` 指令的表单元素进行校验时确实会遇到一些挑战。具体来说，在使用 `v-if` 控制 DOM 显示隐藏的情况下，可能会导致之前的校验提示仍然存在或者新的校验逻辑无法正常工作。为了有效处理这个问题并确保表单验证能够按照预期运行，可以采取如下措施： #### 方法一：外部包裹层在一个额外的 `<view>` 标签里放置需要动态显示/隐藏的内容，并将 `v-if` 应用于这个外层容器上而不是直接作用于 form-item 上[^2]。这样做有助于保持内部组件的状态一致性以及避免不必要的渲染开销。 ```html <template> <view :class="[visible ? 'show' : 'hide']">  <u--form ref="myFormRef" :model="formData" :rules="rules"> <u-form-item label="用户名" prop="username"> <u-input v-model="formData.username"></u-input> </u-form-item> </u--form> </view> </template> <script setup lang="ts"> import { reactive, toRefs } from 'vue'; const state = reactive({ visible: true, formData: { username: '' }, }); // Validation rules... const rules = { username: [ { required: true, message: '请输入用户名', trigger: ['blur', 'change'] } ] }; function toggleVisibility() { state.visible = !state.visible; } defineExpose({ toggleVisibility }); </script> ``` #### 方法二：统一管理 `v-if` 尽可能减少页面中频繁切换多个 `v-if` 来控制不同部分可见性的做法，而是尝试通过单一条件来决定整个区域是否应该被呈现出来。这不仅简化了模板结构也减少了潜在错误的发生几率。 #### 方法三：利用 `nextTick` 如果发现即使采用了上述建议仍存在问题，则可以在改变 `v-if` 所依赖的数据属性之后立即调用 `$refs.form.validate()` 或者等待下一个DOM更新周期再执行验证操作[^4]。这样做的目的是让Vue有足够的时间完成视图更新后再去触发验证流程。 ```javascript this.$nextTick(() => { this.$refs.myFormRef.validate((valid) => { if (valid) { console.log('提交成功'); } else { console.error('表单验证失败！'); } }); }); ``` 以上策略可以帮助开发者更好地理解和应对由于 `v-if` 导致的表单验证问题，从而构建更加稳定可靠的前端应用体验。