Uncaught ReferenceError: "xxx" is not defined (VUE)

Question

New to Vue, trying to figure out something. I'm using this "Data":

data() {
        return {
            currentPage: 0,
            nextPage: '',
            previousPage: '',
            left: '',
            opacity: '',
            scale: '',
        }
    },

Trying to use the data variables inside a method looks like this:

methods: {
        isStageOneDone: function () {
            var animating;
            if(animating) return false;
            animating = true;
            this.currentPage;
            console.log("CurrentPage =>", currentPage);
   }
}

But I keep getting this error:

Uncaught ReferenceError: currentPage is not defined

What am I missing? I looked into the Vue docs and it seems ok I think

Edit: Is it possible that because of the return() the error occurs?

Parentheses must be wrapped around objects which are returned or it will not be interpreted correctly. (Edit: This is because `return {` will be interpreted as `return {;` due to what's known as [Automatic Semicolon Insertion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#automatic_semicolon_insertion). For more info, see https://stackoverflow.com/questions/8528557/why-doesnt-a-javascript-return-statement-work-when-the-return-value-is-on-a-new).) — Edric, Mar 19 '21 at 12:05
The code inside your function doesn't make much sense. In order for anyone to be able to help you, we'd need to at least understand what it is you are trying to achieve. As a sidenote, your code does try to use a variable (`currentPage`) which has not yet been defined in the scope of your function (because `this.currentPage` is not `currentPage`). However, even if you did define it prior to using it, you'd only remove the error, it wouldn't do anything. So, what are you trying to do with that code? — tao, Mar 19 '21 at 12:20

score 1 · Accepted Answer · answered Mar 19 '21 at 12:25

1

You have to add "this" key for access to defined inside data attributes. for example:

data(){
return{
  variable:'example'
}
},
methods:{
  
  exampleFunc(){
  
  
  return this.variable;
  }
}

answered Mar 19 '21 at 12:25

Mahir Altınkaya

407
6
15

1

Hey, i'm wondering if u can help me with something else? – Mar 19 '21 at 12:41

Ali Asgher Badshah · Answer 2 · 2021-03-19T12:13:59.367

0

Hi you should define your methods like below

methods: {
 isStageOneDone(path, data) {
        var animating;
        if(animating) return false;
        animating = true;
        this.currentPage;
        console.log("CurrentPage =>", this.currentPage);
 }
}

lets try it out i think it will work for you

edited Mar 19 '21 at 12:13

answered Mar 19 '21 at 12:10

Ali Asgher Badshah

811
1
11
34

yes because you forget to mention "this" before currentPage – Ali Asgher Badshah Mar 19 '21 at 12:13
as so I, I updated the answer please check it out – Ali Asgher Badshah Mar 19 '21 at 12:14
Oh, bad habits..i will learn for the feature – Mar 19 '21 at 12:16

Uncaught ReferenceError: "xxx" is not defined (VUE)

2 Answers2