There is an error array in the data that gets populated when a user focuses out of an input field. If the input is empty, it adds an object to the error array with specific messages for 'product_name' and 'barcode'. The structure looks like this:
[
"0": {
"product_name": {
"message": "This field is required"
},
"barcode": {
"message": "This field is required"
}
},
"1": {
"barcode": {
"message": "This field is required"
}
},
"2": {
"product_name": {
"message": "This field is required"
}
}
]
The numbers 0, 1, 2 correspond to the index of the item in a v-for loop, while 'product_name' and 'barcode' refer to the inputs in each item/index. I am now attempting to display these errors.
I have tried the following code snippets but they do not display the span:
<span class="tooltip"
v-if="errors && errors[index] && errors[index]['product_name']" style="left: 5px">
test123 (this is a product_name error)
</span>
<span class="tooltip"
v-if="errors && errors[index] && errors[index]['product_name']" style="left: 5px">
test123 (this is a barcode error)
</span>
An issue might be related to the checkInput function as shown below:
checkInput(name, itemIndex){
if(this.documentItems[itemIndex][name] == null){
this.errors[itemIndex][name] = { message: 'This field is required'}
};
//testing
console.log(this.errors[itemIndex][name]); //works
if(this.errors[1]['product_name']){
console.log("yes"); //works
}
},
If I define the errors object directly without using a loop, the spans show up correctly:
errors: {
0: {
barcode: '',
product_name: ''
},
1: {
barcode: '',
product_name: ''
}
},
However, if I create the errors object using a for loop, the spans do not show up:
for(var i = 0;i < response.data.documentItems[0].length;i++){
this.errors[i] = {
barcode: '',
product_name: '',
}
}