vue表单验证 提示语错位/表单值错乱

问题：

表单提示语错位、在v-if控制消失后提示语依然存在、或者其中一个表单值赋给了另一个表单值

image.png

image.png

代码大致是这样的：

<template v-if="optionType === '1'">
  <el-form-item prop="modelId">
    <el-select v-model="form.modelId"></el-select>
  </el-form-item>
</template>
<template v-else-if="optionType === '2'">
  <el-form-item prop="filterData">
    <el-switch v-model="form.filterData"></el-switch>
  </el-form-item>
</template>

当 optionType 的值发生改变，一个表单项隐藏而另一个显示时，如果不设置key值，vue不能分辨出组件发生改变，会将组件reuse后继续使用，可能造成奇怪的冗余问题。

• 如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
• 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

解决方法：

加上key值

<template v-if="optionType === '1'">
  <el-form-item key="modelId" prop="modelId">
    <el-select v-model="form.modelId"></el-select>
  </el-form-item>
</template>
<template key="filterData" v-else-if="optionType === '2'">
  <el-form-item prop="filterData">
    <el-switch v-model="form.filterData"></el-switch>
  </el-form-item>
</template>