iview表单验证动态删减表单项小红点的问题

qq_47452289

于 2020-12-30 11:18:05 发布

阅读量854

点赞数

文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_47452289/article/details/111953776

版权

本文探讨了在Vue框架中遇到的表单验证问题，特别是动态增删表单项时出现的小红点错误。解决方案是为动态生成的表单项添加唯一的`key`属性，以确保Vue能够正确跟踪和更新组件状态。这有助于避免不必要的验证错误，保持表单验证的准确性。

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

iview表单验证动态删减表单项小红点的问题

在这里插入图片描述

本身验证规则如上图，但是根据广告类型动态修改了表单项后会发现表单验证会出问题。

在这里插入图片描述
我们会发现权重这一项前面莫名多了一个验证的小红点。
解决办法很简单，给动态删减的表单项添加一个key属性即可，key的值随意，不重复就好

 <FormItem label="创意类型：" key="ad1">
        <Select v-model="adForm.creativeType">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
</FormItem>
      <FormItem label="展示位置：" key="ad2">
        <Select v-model="adForm.adPosition" >
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
</FormItem>