Vue.js data not available in created() function

Question

I'm having issues with initialising my Vue component with data from localStorage. Here is a simplified version of my code

new Vue({
    el: "#my-element",
    created: () => {
        if (window.localStorage.getItem("verified")) {
            this.verification.verified = true;
        }
    },
    data: {
        verification: {
            verified: false
        }
    }
});

But I keep getting an error on the console Cannot read property 'verification' of undefined

If I put a debugger in the created() function, and I check the values of this, this.verification and this.verification.verified, they're all set to the values I have initialized with in the data object.

Can someone explain what I am doing wrong?

Basically I'm trying to hide an element when the page loads if the user has already gone through the verified process at any previous time.

Marty · Accepted Answer · 2017-02-10 01:19:00Z

5

The arrow function is intended for use when you want the value of this in the outer context to flow into your function body, rather than the function having its own context for this. This means that this in your created function does not point to your Vue instance.

You can however still use the shorthand method declaration syntax provided by ES6:

new Vue({
    created() {
        // ...
    }
});

answered Feb 10, 2017 at 1:19

Marty

39.5k19 gold badges97 silver badges164 bronze badges

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

Comments

Denno · Accepted Answer · 2017-02-10 01:11:17Z

0

Okay I figured out the problem.. It's because I'm using ES2015 notation for functions.. Changing back to function(){} allows it to work again.. So I need to do some more research to figure out how to use ES2015 with Vue.js

answered Feb 10, 2017 at 1:11

Denno

2,2183 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Vue.js data not available in created() function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related