Data scope in Vue.js

Question

I'm new to vue.js I'm working with the code below and run into some problem. I was trying to access data myData within a for loop within a method myFunction in the method object using this.myData but it is inaccessible/out of scope

 export default MyComponent.extend({
    data:function(){
    return {
        myData: []
    }
},
ready:function(){
    this.myFunction();
},
methods:{
    myFunction:function(){
        Vue.http.get('/getdata').then((response) => {
            for (var i = 0; i < response.data.info.length; i++) {
            this.myData.push(response.data.info[i].address);
        }

    });
    }
}
})

ceejayoz · Accepted Answer · 2016-09-26 16:10:55Z

2

You're correct, this is a scope issue. Your then() function has a different scope. You can .bind(this) at the end of your function to pass this to the function.

Vue.http.get('/getdata').then((response) => {
    for (var i = 0; i < response.data.info.length; i++) {
        this.myData.push(response.data.info[i].address);
    }
}.bind(this));

Another approach you may often see is aliasing this:

var self = this;

Vue.http.get('/getdata').then((response) => {
    for (var i = 0; i < response.data.info.length; i++) {
        self.myData.push(response.data.info[i].address);
    }
});

answered Sep 26, 2016 at 16:10

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

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

2 Comments

ceejayoz Over a year ago

There are some ES2015/ES2016 approaches to consider as well, but I'm not familiar with them. See #4 onwards at sitepoint.com/bind-javascripts-this-keyword-react

Bill Criswell Over a year ago

You're using arrow functions, this should be exactly what you're expecting without the .bind(this).

tony19 · Accepted Answer · 2022-07-15 01:43:54Z

0

instead of using 'ready' use the new functions of vue 2.0 https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

you can use mounted () {this.myFunction ()}

when executing the function you can already see the data () of the component

edited Jul 15, 2022 at 1:43

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 21, 2017 at 23:44

Luis Daniel Rovira Contreras

1036 bronze badges

Collectives™ on Stack Overflow

Data scope in Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related