踩坑 - Vue 使用 v-show 失效和element表单验证失效

最新推荐文章于 2025-03-06 09:01:11 发布

杨小凹

最新推荐文章于 2025-03-06 09:01:11 发布

阅读量1.8k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/aiyang1214878408/article/details/125170999

版权

本文探讨了在Vue中使用Element UI构建表单时，遇到的v-if控制元素显示导致的表单验证失效问题，以及后续尝试v-show替代解决方案的过程，揭示了v-show不支持template的局限性。

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

场景

<el-form :model="modifyData" ref="ruleForm" >
  <el-form-item label="广告位ID" label-width="200px">{{modifyData.posId}}</el-form-item>
  <template v-if="modifyData.dataAccessMethod === 1">
     <el-form-item label="映射广告位ID" label-width="200px">
       <el-input v-model="modifyData.campaignId"></el-input>
     </el-form-item>
   </template>
   <template v-if="modifyData.dataAccessMethod === 2">
     <el-form-item label="渠道号" label-width="200px" prop="channelId"
      :rules="{required: true, message: '请输入渠道号'}">
       <el-input v-model="modifyData.channelId"></el-input>
     </el-form-item>
   </template>
</el-form>

使用element的form表单了，通过v-if控制表单元素的显示隐藏，发现点提交时表单校验失效，打印发现会直接通过校验。明明是空数据怎么会通过呢？？!

 this.$refs['ruleForm'].validate((valid) => {
    console.log(valid); //  一直打印true
   if (valid) {
     alert('submit!');
   } else {
     console.log('error submit!!');
     return false;
   }
 });

然后排查原因发现是 v-if显示会导致表单验证失效。那好，那我就改成v-show。

 <template v-show="modifyData.dataAccessMethod === 1"><template>
 <template v-show="modifyData.dataAccessMethod === 2"><template >

改成v-show之后又发现判断条件没有生效，页面显示所有的元素，这又是为啥。

然后又排查发现 本质上应该是因为 v-show 不支持 template标签，ok，改成div。最好解决了使用 v-show 失效和element表单验证失效。

总结

1.v-if显示会导致表单验证失效
2. v-show 不支持 template 标签