Vue Javascript forEach loop inside method

Question

i'm trying to add multiple images and i can't find a way to make it work.

I have this method:

        imageAdd(e) {         
            e.forEach(function(e) {
            if (e.type == 'image/jpeg' || e.type == 'image/png')
            {
                this.images.push({
                    image: URL.createObjectURL(e),
                    imageData: e
                    })
            }
            })
   },

When i try to push to images array, it brings me this error Cannot read property 'images' of undefined although it is defined inside my data. What's the problem here?

.forEach(/*...*/, this) or .forEach(/*...*/.bind(this) or related. — ASDFGerte
– ASDFGerte, Commented Dec 1, 2020 at 16:07
True, or use for ... of instead of .forEach, which is often superior anyways — ASDFGerte
– ASDFGerte, Commented Dec 1, 2020 at 16:07

Anatoly · Accepted Answer · 2020-12-01 16:07:16Z

1

Use arrow function instead a usual one that has its own this:

 imageAdd(e) {         
            e.forEach((e) => {
            if (e.type == 'image/jpeg' || e.type == 'image/png')
            {
                this.images.push({
                    image: URL.createObjectURL(e),
                    imageData: e
                    })
            }
            })
   }

answered Dec 1, 2020 at 16:07

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

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

1 Comment

Steve Over a year ago

Yep, made it work like a charm. I used a for statement but this one looks more clean to me.

Collectives™ on Stack Overflow

Vue Javascript forEach loop inside method

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related