【发布时间】：2018-09-21 15:06:18
【问题描述】：
我需要验证 Vue Element 中的嵌套表单数据。 example 与我的代码完全相同。 dynamicValidateForm 包裹在 MainForm 中的唯一区别。但我无法让它工作。
https://jsfiddle.net/mwxaqhn7/
这是我的代码：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-form :model="MainForm.dynamicValidateForm" ref="MainForm.dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-form-item
v-for="(domain, index) in MainForm.dynamicValidateForm.domains"
:label="'Domain' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="rules"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('MainForm')">Submit</el-button>
<el-button @click="addDomain">New domain</el-button>
<el-button @click="resetForm('MainForm.dynamicValidateForm')">Reset</el-button>
</el-form-item>
</el-form>
</div>
应用：
new Vue({
el: '#app',
data: {
MainForm:
{
dynamicValidateForm: {
domains: [{
key: 1,
value: ''
}],
},
},
rules: {
value: [
{ required: true, message: 'Please input'},
],
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
addDomain() {
this.MainForm.dynamicValidateForm.domains.push({
key: Date.now(),
value: ''
});
},
Validate(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
}
})
我想用相同的规则验证所有嵌套元素。
我也试过用另一种方式来做，但又遇到了一个错误https://jsfiddle.net/st56h3ky/
Error: please transfer a valid prop path to form item!
【问题讨论】：
-
您检查过 vuelidate 的 collections validation 吗？这样就可以使用相同的规则验证每个项目。
-
@RWAM 如果我理解正确的话，它不是原生的 Vue Element 插件，所以我怕在集成 Vue Element 时遇到麻烦。
-
您找到如何使用 ElementUI 验证子组件了吗？
标签： vue.js