数组循环渲染表单注意点

最新推荐文章于 2024-01-30 15:41:12 发布

跨端

最新推荐文章于 2024-01-30 15:41:12 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏：工作记录文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_53876100/article/details/122168575

工作记录专栏收录该内容

7 篇文章

订阅专栏

在Vue.js中，使用v-for循环渲染表单时，需要注意prop的动态绑定和rules的写法。文章详细解释了如何通过`list[index].name`来设置prop，并将rules放在行内以确保表单验证的正确执行，特别是强调了在`blur`事件触发时的必填字段验证。

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

当使用数组循环渲染表单时，需要特别注意prop的写法，同时把rules写在行内，否则会导致效验直接通过

<div v-for="(item,index) in dataFields.list :key="index">
    <el-form-item label="name" :prop="`list[${index}].name`" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
       <el-input placeholder="name" v-model="item.name"></el-input>
   </el-form-item>
</div>