CODEWITHSUNDEEP
vue.js
Precious Aang
Precious Aang

Reputation: 73

How to find object length in vue

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.

Upvotes: 2

Views: 23024

Answers (3)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

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!

Upvotes: 2

Claudio Castro
Claudio Castro

Reputation: 191

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
}

Upvotes: 12

cello
cello

Reputation: 5486

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);
        });

Upvotes: 0

Related Questions