How to find object length in vue

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.

Claudio Castro · Accepted Answer · 2019-07-19 21:25:29Z

12

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
}

answered Jul 19, 2019 at 21:25

Claudio Castro

1911 gold badge1 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Giovanni Pumo · Accepted Answer · 2019-07-19 21:53:20Z

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!

edited Jul 19, 2019 at 21:53

answered Jul 19, 2019 at 21:19

Michael Giovanni Pumo

14.9k18 gold badges100 silver badges145 bronze badges

Comments

cello · Accepted Answer · 2019-07-19 21:22:20Z

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

Collectives™ on Stack Overflow

How to find object length in vue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related