How to find object length in vue - vue.js

Question

I am trying to write a form validation using VueJS.
I keep testing for the length of the error object. I keep getting undefined when I log it console.
I used this.errors.length to refer to it. It seems to treat .length as a key in errors.
data(){
return {
name: null,
price: null,
description: null,
roomTypes: {},
errors: {},
}
},
methods: {
addRoomType: function(){
if(this.name && this.description && this.price && this.this.description>10){
axios.post('/admin/room-types',{
name: this.name,
price: this.price,
description: this.description
}).then((response)=>{
this.errors = {};
this.roomTypes.push(response.data);
}).catch((error)=>{
this.errors = error.response.data;
console.error(error.response.data);
});
}
//this.errors = {};
if(!this.name){
this.errors.name = "Please enter a name.";
console.log(this.errors.name);
}
if(!this.description){
this.errors.description = "Please enter a description.";
console.log(this.errors.description);
}
if(!this.price){
this.errors.price = "Please enter a price.";
console.log(this.errors.price);
}
if(this.errors.length){
console.log(this.errors.length);};
I want to be able to get the size of the errors object so i can check if it is empty.

Answer 1

By using this.errors.length you are trying to access a this.errors key.
In order to check a Javascript object length you can use Object.keys
Something like that:
if (Object.keys(this.errors).length) {
//your code here
}

Answer 2

Try using Object.keys(this.errors).length.
Though for better management, I would recommend making errors an array and storing errors as an array of objects.
Something like:
const myErrors = [
{ name: ‘First name’, message: ‘Name is required’ },
{ name: ‘Email’, message: ‘Email must be valid’ }
]
This is a pseudo example but doing errors as an array allows you to loop them easily and avoids name collisions thay might come from object keys. Just an idea!

Answer 3

First, .length only applies to arrays, but errors is an object, not an array.
Second, I think, the assignments of errors or room types will not work in this part of the code:
axios.post('/admin/room-types',{
name: this.name,
price: this.price,
description: this.description
}).then((response)=>{
this.errors = {};
this.roomTypes.push(response.data);
}).catch((error)=>{
this.errors = error.response.data;
console.error(error.response.data);
});
The response- and the error handler are own functions, which likely don't have this defined to the same Vue-object as your method. Instead, keep a reference to the Vue-object in a variable self, and use that in the handlers to assign the values:
var self = this;
axios.post('/admin/room-types',{
name: this.name,
price: this.price,
description: this.description
}).then((response)=>{
self.errors = {};
self.roomTypes.push(response.data);
}).catch((error)=>{
self.errors = error.response.data;
console.error(error.response.data);
});