正文
Vue 中循环绑定v-module表单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
子组件有一个列表要做输入验证
<template>
<div>
<el-form :model="value" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item
v-for="(domain, index) in value.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'change'
}"
>
<el-input v-model="domain.value"></el-input>
</el-form-item>
</el-form>
</div>
</template> <script>
export default { props: {
value: {
type: Object,
default: () => {}
}
}, methods: {
submitForm (formName) {
return this.$refs.numberValidateForm.validate()
}
}
}
</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>
