v-for循环生成el-input带rules验证

功能介绍：利用v-for循环批量生成el-input组件，并对指定el-input带rules验证。

1、template

<el-form
  :model="searchForm"
  :rules="rules"
  ref="ruleForm"
  label-width="100px"
>
  <div v-for="(item, index) in searchForm.list" :key="index">
    <el-form-item
      :label="item.label"
      :prop="'list.' + index + '.value'"
      :rules="item.rules.value"
    >
      <el-input
        v-model="item.value"
        :placeholder="item.placeHolder"
      ></el-input>
    </el-form-item>
  </div>
</el-form>

2、data

data() {
  return {
    searchForm: {
      list: [
        {
          index: 1,
          value: "",
          label: "名称：",
          placeHolder: "请输入",
          rules: {
            value: [
              { required: true, message: "请输入名称", trigger: "blur" }
            ]
          }
        },
        {
          index: 2,
          value: "",
          label: "年龄：",
          placeHolder: "请输入",
          rules: {
            value: [{ required: false }]
          }
        },
        {
          index: 1,
          value: "",
          label: "身份证号：",
          placeHolder: "请输入",
          rules: {
            value: [
              { required: true, message: "请输入身份证号", trigger: "blur" }
            ]
          }
        }
      ]
    },
    rules: {}
  }
}

JavaScript动态绑定方法不执行正确代码示例

Vue动态绑定类时出现“空类”怎么办

vuejs实现el-input复制粘贴功能

v-for批量生成el-input并动态绑定v-model（实时获取input输入值和索引）

el-input输入框关键字筛选列表数据

标签： el-input, rules验证, v-for循环, 动态绑定

上面是“v-for循环生成el-input带rules验证”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2535.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！