动态prop校验不生效的问题

271 阅读1分钟

需求:prop使用三元表达式赋值,实现动态验证,满足条件时触发校验

 <el-form-item label="账号" :prop="formData.type === 1 ? 'account' : ''">
      <el-input v-model.trim="formData.account" placeholder="请填写账号"></el-input>
 </el-form-item>

上面代码只是动态修改了prop属性,未触发表单的重新渲染。 因为vue的diff算法会尽可能的复用组件,所以即使使用了v-if实际上diff算法仍会复用组件,并没有重新渲染,因此需要配合key属性。

有key时:
Diff算法可以通过唯一的标识key正确的识别此节点,插入需要更新的节点,复用key不变的节点。

<el-form-item label="账号" :key="formData.type" :prop="formData.type === 1 ? 'account' : ''">
   <el-input v-model.trim="formData.account" placeholder="请填写账号"></el-input>
</el-form-item>