No, a form field must have a unique name. Here is the solution to solve your issue.
1. Extend from FieldBase and custom a component to display multiple DateBox components.
<template>
<span>
<Form ref="form" :model="model" :rules="rules" @validate="errors=$event">
<div v-for="field in fields" :key="field" style="margin-bottom:20px">
<DateBox :name="field" v-model="model[field]" @valueChange="onValueChange($event,field)"></DateBox>
<div class="error">{{getError(field)}}</div>
</div>
</Form>
</span>
</template>
<script>
import { FieldBase } from "vx-easyui";
export default {
name: "DateGroup",
extends: FieldBase,
props: {
value: Array
},
data() {
return {
model: {},
rules: {},
errors: {}
};
},
computed:{
fields(){
return Object.keys(this.model)
}
},
created() {
for (let i = 0; i < this.value.length; i++) {
this.model['field' + i] = this.value[i];
this.rules['field' + i] = 'required';
}
this.$on('validate', (valid) => {
this.$refs.form.validate()
})
},
methods:{
onValueChange(event, field){
this.$emit('input', Object.values(this.model));
},
getError(name) {
return this.errors[name] && this.errors[name].length
? this.errors[name][0]
: null;
},
hasError(name) {
if (name){
return this.getError(name) != null;
}
let err = false;
this.fields.forEach(f => {
if (this.hasError(f)){
err = true;
}
})
return err;
}
}
};
</script>
2. Then apply it to the form.
<DateGroup ref="task" name="task" v-model="user.task"></DateGroup>
3. Define your form data.
export default {
components: { DateGroup },
data() {
return {
user: {
task: [null, new Date()]
},
rules: {
},
errors: {}
};
},