Using VUE.JS to trigger a function that applies discounts prior to form submission

Question

Using VUE.JS to trigger a function that applies discounts prior to form submission

Before submitting my form with Axios, I am in need of applying specific discounts to each item within campaign.items.

To achieve this, a functional method has been created:

  applyDiscount(price) {
    return price - (this.totalDiscount * price)
  },

Prior to submission, I am integrating the call to this function inside my submit function:

 methods: {
  submit() {
    this.campaign.items.forEach(function(item) {
        this.applyDiscount(item.price)
    }),
    var data = new FormData()

An error message is being displayed as follows:

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'applyDiscount')"

javascript vue.js

Answer 1

Answer №1

The main problem arises when this inside the anonymous function differs from the outer scope's this. One common solution is to create a reference to this beforehand, like so: let that = this;, and then utilize that within the inner function:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        var that = this;
        [1,2].forEach(function() {
            that.applyDiscount();
        })
    }
}

let x = new Demo();
x.example()

Alternatively, you can bind this:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        [1,2].forEach((function() {
            this.applyDiscount();
        }).bind(this))
    }
}

let x = new Demo();
x.example()

Another option is to use an arrow function:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        [1,2].forEach(() => {
            this.applyDiscount();
        })
    }
}

let x = new Demo();
x.example()

Answer 2

The main problem arises when this inside the anonymous function differs from the outer scope's this. One common solution is to create a reference to this beforehand, like so: let that = this;, and then utilize that within the inner function:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        var that = this;
        [1,2].forEach(function() {
            that.applyDiscount();
        })
    }
}

let x = new Demo();
x.example()

Alternatively, you can bind this:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        [1,2].forEach((function() {
            this.applyDiscount();
        }).bind(this))
    }
}

let x = new Demo();
x.example()

Another option is to use an arrow function:

class Demo {
    applyDiscount() {
        console.log('hi');
    }
    example() {
        [1,2].forEach(() => {
            this.applyDiscount();
        })
    }
}

let x = new Demo();
x.example()

Answer 3

Answer №2

I might have made a similar choice, as it seems that the "universal" this is not equivalent to the specific this.

An arrow function could potentially resolve this issue,

 methods: {
  submit() {
    this.campaign.items.forEach((item) => {
        this.applyDiscount(item.price)
    }),
    var data = new FormData()

Answer 4

I might have made a similar choice, as it seems that the "universal" this is not equivalent to the specific this.

An arrow function could potentially resolve this issue,

 methods: {
  submit() {
    this.campaign.items.forEach((item) => {
        this.applyDiscount(item.price)
    }),
    var data = new FormData()

Using VUE.JS to trigger a function that applies discounts prior to form submission

Answer №1

Answer №2

Similar questions

Increase the count if the item is already in the shopping cart - React

Clicking on React Js reverses an array that had previously been unreversed

Interactive Geography Selector

Is there a way for me to identify what deletes CSS classes from an element during the first page load?

Selenide is failing to remove elements with the displayed property set to false

Transformation of an Ajax array into an associative array

Steps for integrating Vue component into Laravel Framework

Challenges Arising from CGI Scripts

Is it not possible to access the profile page using the GET method?

Attempting to show the name in AngularJS

Dealing with jQuery's AJAX time conflicts

What is the best way to ensure a CSS element maintains its position margins even after adjusting them with JavaScript?

Retrieving arrays in subdocuments with MongoDB queries

Using v-autocomplete to store and display user input

Markers on the map are not receiving the necessary click event handlers

What is the best way to retrieve the current URL with a hashtag symbol using JavaScript?

SwiperJs: I'm struggling to align groups of 2 slides in the center because I am unable to limit the width of the slides

Differences in performance between Angular and JQuery_execution times

Generate projectiles within a game periodically

Issue with the side panel: unable to close it