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>
  • 相关阅读:
    OSCP Learning Notes Buffer Overflows(3)
    OSCP Learning Notes Buffer Overflows(5)
    OSCP Learning Notes Exploit(3)
    OSCP Learning Notes Exploit(4)
    OSCP Learning Notes Exploit(1)
    OSCP Learning Notes Netcat
    OSCP Learning Notes Buffer Overflows(4)
    OSCP Learning Notes Buffer Overflows(1)
    OSCP Learning Notes Exploit(2)
    C++格式化输出 Learner
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/10168747.html
Copyright © 2011-2022 走看看