踩坑elment-plus 表单验证prop

使用element-plus 表单验证prop属性丢失响应式

toName这个属性不需要验证，复制的时候不小心加上去了，加上去不要紧，既然丢失了响应式

 <el-form-item label="接单人" :label-width="formLabelWidth" class="displayFlex" prop="toName">
     <el-tag w-text="16px">{{formData.toName}}</el-tag>
 </el-form-item>

正确是，去掉prop属性，响应式又回来了

 <el-form-item label="接单人" :label-width="formLabelWidth" class="displayFlex">
     <el-tag w-text="16px">{{formData.toName}}</el-tag>
 </el-form-item>

• 以下回答由chatgpt基于相关博客总结生成:

  在element-plus表单验证中，使用prop属性绑定字段名是将该字段与表单验证绑定的常用方法。如果不需要验证的字段在复制代码时误加了prop属性，可以按照以下步骤保持响应式并去掉prop属性：

  1. 在该字段的input组件中取消prop属性的绑定，例如：将 ":prop='toName'" 修改为 ":value='toName'"；

  2. 在表单验证规则中单独添加该字段的校验规则。例如，将原本的rules数组中：

     rules: { toName: [ { required: true, message: '请输入接收人名字', trigger: 'blur' }, { validator: validateToName, trigger: 'blur' } ], title: [ { required: true, message: '请输入标题', trigger: 'blur' }, { min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur' } ] }

  修改为：

  rules: {
      title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur' }
      ]
    },
    toName: [
        { validator: validateToName, trigger: 'blur' }
    ]
  

  这样就可以保持响应式，并将不需要验证字段的规则移动到该字段的单独校验规则中。

很正确