如下代码，我通过【type】字段管制一个表单组是否显示：
<van-cell-group v-if='type=== "1"'> <van-field readonly clickable name="birthday" :value="birthday" maxlength="50" label="出生日期：" placeholder="请抉择" :rules="[{ required: true, message: '请抉择出生日期' }]" @click="showDatePicker = true" /> <van-popup v-model="showDatePicker" position="bottom"> <van-datetime-picker type="date" title="抉择年月日" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @confirm="confirmDate" @cancel="showDatePicker = false" /> </van-popup></van-cell-group> <van-cell-group v-if='type=== "2"'> <van-field readonly clickable name="idcard" :value="idcard" label="身份证号：" placeholder="请填写" :rules="[{ required: true, message: '请填写身份证号' }]" /></van-cell-group>当type 为1时，显示抉择出生日期
当我没有选出生日期，间接点击提交时，vant 谬误提醒就进去了（如下图格局），提醒我“请抉择出生日期”
到这一步都没有问题，于是 我将type 选为2，这个时候，我发现我输出身份证号的表单下，呈现了上一条谬误提醒“请抉择出生日期” 这个时候我就懵了
这个errorMessage 没有被替换掉！ 而是被沿用了
用vue官网的解释： “，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法。”
也就是说，这两个表单的errorMessage 所用的div都是同一个
问题发现了，然而我不晓得起因，我通过display：none管制了，内容却没有变动......兴许是因为我另一个表单的errorMessage还没有设置，所以它并没有被就地批改？？？求解
不论怎么样，先来解决一下吧，这时候就用到了除了循环外 不怎么应用的vue的key属性
key 的非凡 attribute 次要用在 Vue 的虚构 DOM 算法，在新旧 nodes 比照时辨识 VNodes。如果不应用 key，Vue 会应用一种最大限度缩小动静元素并且尽可能的尝试就地批改/复用雷同类型元素的算法。而应用 key 时，它会基于 key 的变动重新排列元素程序，并且会移除 key 不存在的元素。
在最外层form上加一个key属性，这个问题就解决了
<van-form id="form" @submit="validate()" :key="formKey">