数组循环渲染表单注意点

最新推荐文章于 2024-02-27 14:49:06 发布

原创最新推荐文章于 2024-02-27 14:49:06 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

工作记录专栏收录该内容

7 篇文章

订阅专栏

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

当使用数组循环渲染表单时，需要特别注意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>