关于vue表单中使用v-if、v-else-if、v-else无法表单验证的问题？

旅行家小二

于 2022-01-05 14:32:53 发布

阅读量873

点赞数 2

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43869982/article/details/122322915

版权

vue 专栏收录该内容

16 篇文章

订阅专栏

该博客探讨了在Vue.js中如何为表单元素动态添加key属性以优化渲染，并结合el-form和v-if/v-else实现条件渲染及验证功能。通过示例代码展示了在年龄验证基础上，根据用户年龄动态显示或隐藏银行卡号输入框的方法。

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

解决方案就是给每个表单加key
如：

<el-form ref="ruleForm" :model="formData" :rules="rules">
    <el-form-item label="名字" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" key="1" v-if="formData.age >= 18" prop="bankCardNo">
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
    <el-form-item label="银行卡号" key="2" v-else>
      <el-input v-model="formData.bankCardNo"></el-input>
    </el-form-item>
  </el-form>