Within my Vue file, I am working with data that has the following structure:
data() {
return {
formData: {
name: 'foo',
objects: [
{id: 0, name: 'a', props: []},
{id: 1, name: 'b', props: ['2', '23']},
{id: 2, name: 'c', props: ['44']},
{id: 3, name: 'd', props: []}
]
},
currentObj = null,
currentPropIndex = null
}
}
The number of objects in the array objects is variable, as is the contents of the props array where string values can be added or removed. I am trying to use Vuelidate to validate each and every value in the props array for each object whenever it changes. This is what I have attempted:
validations: {
formData: {
name: { required, maxLength: maxLength(64) },
objects: {
props: {
$each: {
required, numeric, maxLength: maxLength(5)
}
}
}
}
},
Computed property:
propsErrors() {
const errors = [];
if ( this.currentObj) {
// const objIndex = _.findIndex(this.formData.objects, o => o.id === this.currentObj.id)
if (!this.$v.formData.objects['props'][this.currentPropIndex].$dirty) {
return errors;
}
!this.$v.formData.objects['props'][this.currentPropIndex].maxLength && errors.push('Max 5 digits')
!this.$v.formData.objects['props'][this.currentPropIndex].required && errors.push('Required')
!this.$v.formData.objects['props'][this.currentPropIndex].numeric && errors.push('Digits only')
}
return errors
},
Here is the code for a Vuetify text field:
<v-text-field single-line flat dense required
v-model="object.props[index]"
:error-messages="propsErrors"
label="Prop"
height="30"
@click="setCurrents(protocol, index)"
@blur="$v.formData.protocolPorts['manual_ports'][index].$touch()"
@input="$v.formData.protocolPorts['manual_ports'][index].$touch()" />
The setCurrents function simply sets the currently edited object and prop index:
setCurrents (protocol, index) {
this.currentObj = protocol;
this.currentPropIndex = index;
}
When testing the page and clicking on the text field, I come across this error:
Error in render: "TypeError: Cannot read property 'props' of undefined"I made an adjustment to the propsErrors method (objIndex is currently commented out in the above code)
this.$v.formData.objects[objIndex]['props'][index].maxLength && errors.push('Max 5 digits')
Updated input field (oi refers to object index):
@input="$v.formData.objects[oi].props[index].$touch()"
Further validations are defined as:
validations: {
formData: {
name: { required, maxLength: maxLength(64) },
objects: {
required,
$each: {
props: {
$each: {
required, numeric, maxLength: maxLength(5)
}
}
}
}
}
},
Despite these modifications, the errors persist. Any suggestions are greatly appreciated.