zoukankan      html  css  js  c++  java
  • Vue 中循环绑定v-module表单

    子组件有一个列表要做输入验证

     1 <template>
     2   <div>
     3     <el-form :model="value" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
     4       <el-form-item
     5         v-for="(domain, index) in value.domains"
     6         :label="'域名' + index"
     7         :key="domain.key"
     8         :prop="'domains.' + index + '.value'"
     9         :rules="{
    10           required: true, message: '域名不能为空', trigger: 'change'
    11         }"
    12       >
    13         <el-input v-model="domain.value"></el-input>
    14       </el-form-item>
    15     </el-form>
    16   </div>
    17 </template>
    18 
    19 <script>
    20 export default {
    21 
    22   props: {
    23     value: {
    24       type: Object,
    25       default: () => {}
    26     }
    27   },
    28 
    29   methods: {
    30     submitForm (formName) {
    31       return this.$refs.numberValidateForm.validate()
    32     }
    33   }
    34 }
    35 </script>

    父组件收集子组件里面的数据然后再提交

    <template>
      <div>
        <h1>验证表单</h1>
        <order-area ref="order" v-model="dynamicValidateForm"></order-area>
        <el-button
          type="primary"
          @click="handleClick"
        >
          提交
        </el-button>
      </div>
    </template>
    
    <script>
    import OrderArea from './OrderArea'
    
    export default {
      components: {
        OrderArea
      },
      data () {
        return {
          dynamicValidateForm: {
            domains: [{value: ''}, {value: ''}, {value: ''}]
          }
        }
      },
    
      methods: {
        handleClick () {
          this.$refs.order.submitForm().then((valid) => {
            console.log(valid, '提交表单')
          }, () => {
            console.log('提交错误')
          })
        }
      }
    }
    </script>
  • 相关阅读:
    ref:使用Dezender对zend加密后的php文件进行解密
    MongoDB-Replica Set Deployment Architecture
    MongoDB-Replication Replica Set Arbiter
    MongoDB-Replication Secondary Members
    MongoDB Replication
    MongoDB 备份方法
    scrapy 框架
    MongoDB 指定应用上下文数据模型
    MongoDB 树形模型
    MongoDB 文档模型关系
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/10168747.html
Copyright © 2011-2022 走看看