Vue TodoList带动态验证规则

最新推荐文章于 2024-08-23 17:12:15 发布

LHC087

最新推荐文章于 2024-08-23 17:12:15 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/weixin_43829905/article/details/104904378

版权

本文介绍如何在Vue的TodoList应用中实现动态验证规则。通过使用Element组件，每个表单都需要添加rules属性，例如:prop="‘wblists.’ + index +’.startnum’"，其中wblists是循环数组，index是索引，startnum是v-model的名称。验证规则如:rules="wblistsRules.startnum"，需对应wblistsRules对象内的规则，而非其他表单的验证规则对象。

摘要由CSDN通过智能技术生成

Vue TodoList带动态验证规则

Vue TodoList带动态验证规则

Vue TodoList带动态验证规则

效果图片：
在这里插入图片描述
代码：

//html代码：
 <el-form :model="wbaddForm" :rules="wbaddRules" ref="wbaddForm" align="center" :inline="true">
        <div v-for="(list,index) in wbaddForm.wblists" :key="list.key">
          <el-form-item
            :label="'数量级'+(index+1)+'：粉丝数量'"
            :prop="'wblists.' + index +'.startnum'"
            :rules="wblistsRules.startnum"
          >
            <el-input
              v-model.number="list.startnum"
              placeholder="请输入数量"
              clearable
              style="width:15vw;"