vuejs mounted: Unable to assign a value to an undefined variable

Question

vuejs mounted: Unable to assign a value to an undefined variable

When I try to run the function below upon mounted, I encounter an error:

"Cannot set the property 'days' of undefined"

Here is my code snippet:

 
       function getDays(date) {
           this.days = (new Date()).getTime() / (1000 * 24 * 60 * 60);
           return parseInt(this.days) - this.START_DAYS;
       }

I find it unhelpful that the error message doesn't specify the line causing the issue. My use of `this.days` instead of `let days` was due to a problem with VueJS.

Since I am still learning about VueJS and how it handles variables, any insights are appreciated.

javascript vue.js

Answer 1

Answer №1

Is this the way you set up your method? :

methods: {
    calculateDays(date) {
      this.days = new Date().getTime() / (1000 * 24 * 60 * 60);
      return parseInt(this.days) - this.START_DAYS;
    }
  },

Additionally, when invoking the method in mounted, remember to use: this.calculateDays()

You can refer to this codesandbox link for more clarity

Answer 2

Is this the way you set up your method? :

methods: {
    calculateDays(date) {
      this.days = new Date().getTime() / (1000 * 24 * 60 * 60);
      return parseInt(this.days) - this.START_DAYS;
    }
  },

Additionally, when invoking the method in mounted, remember to use: this.calculateDays()

You can refer to this codesandbox link for more clarity

Answer 3

Answer №2

To optimize your code, consider moving the getDays function to the methods section and then call it within the mounted lifecycle hook.

I noticed that you have included a date argument in the getDays function, but it is not being utilized within the method itself.

...
data() {
  return {
    days: ''
    START_DAYS: ''
  }
}
methods: {
  getDays(date) {
    // 'date' parameter seems unused here
    this.days = (new Date()).getTime() / (1000 * 24 * 60 * 60);
    return parseInt(this.days) - this.START_DAYS;
  }
},
mounted() {
  this.getDays()
}
...

Answer 4

To optimize your code, consider moving the getDays function to the methods section and then call it within the mounted lifecycle hook.

I noticed that you have included a date argument in the getDays function, but it is not being utilized within the method itself.

...
data() {
  return {
    days: ''
    START_DAYS: ''
  }
}
methods: {
  getDays(date) {
    // 'date' parameter seems unused here
    this.days = (new Date()).getTime() / (1000 * 24 * 60 * 60);
    return parseInt(this.days) - this.START_DAYS;
  }
},
mounted() {
  this.getDays()
}
...

vuejs mounted: Unable to assign a value to an undefined variable

Answer №1

Answer №2

Similar questions

Steps to resolve the error message 'npm ERR! Cannot read property 'startsWith' of null':

I am unable to create a visual representation using the data obtained from the API

Checking if the group of radio buttons has been selected using JQUERY

Utilize Element-UI to effectively close dropdown menus

Each time the button is clicked, the settings and values will rotate, creating a new

Ways to determine the total amount of days in a given month

What is the best method to calculate the total of multiple input values from various cells and display it in the final cell of an Angular table?

Using an AngularJS array with ng-repeat

The webpack production build consistently displays the message "This site is running on the development build of React."

After the click event, the variable in the Angular .ts file does not get refreshed

Iterate through the elements in an array in order to generate new elements

Using XSL variables in JavaScript code

"Effortlessly attach and send multiple images via email using Dropzone in

Is it possible to center the image and resize it even when the window is resized?

create a sapper route using JSON data

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

What could be causing the error I'm encountering while running the 'net' module in Node.js?

Selenium Assistance: I'm encountering a scenario where on a webpage, two elements share the same Xpath, making it difficult to differentiate them based on even

A common inquiry: how can one pinpoint a location within an irregular figure?

The AngularJs 2 framework encountered an issue with booting up after attempting to combine all TypeScript files into a single JavaScript file