Interval Vue.js not working

Question

I am new to Vuejs. I am trying to set a interval to a function. Unfortunately It doesn't work. I get the following error out of it:

Uncaught TypeError: Cannot read property 'unshift' of undefined

Just a regular alert box IS working. So I guess the variable can't be accessed. How can I access the variable of message? I added a jsfiddle below.

JS

new Vue({

    el: '#app',

    data: {


        message: {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'},

        messages: [

            {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'tw'},
            {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'fb'},


        ],

        headerShow: false,
        programShow: false,
        sliderShow: true

    },

    methods: {

        addTweet: function() {
            if(this.message.message){
                this.messages.unshift(this.message);
                this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
            }
        },

        setTweet: function() {

            setInterval(function() {
                this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
                this.messages.unshift(this.message);
            }, 5000);


        }



    }

});

https://jsfiddle.net/fLj5ac0L/

score 5 · Accepted Answer · answered Mar 31 '17 at 07:38

It's because you lost the correct context into the setInterval, so this is not bounded to Vue object and this.message would return undefined.You can use arrow function to solve this, or keep context inside the another variable.

setTweet: function() {

    setInterval(() => {
        this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
        this.messages.unshift(this.message);
    }, 5000);


}

or

setTweet: function() {
    var self = this;
    setInterval(function() {
        self.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
        self.messages.unshift(self.message);
    }, 5000);


}

Already thought that something like that was the problem. But, I know now what the exact problem is. Thanks for your help! — Giesburts, Mar 31 '17 at 07:49

score 1 · Answer 2 · edited May 23 '17 at 11:46

You can NOT use this in function(){} to call outside variables, the function(){} create a new scope, you can modify you code like this:

setTweet: function() {
  var that = this;
  setInterval(function() {
    that.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
    that.messages.unshift(this.message);
  }, 5000);
}

or you can use arrow function like this:

setTweet: function() {
  setInterval(() => {
    this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
    this.messages.unshift(this.message);
  }, 5000);
}

You can get more about JavaScript variable scope on this question: What is the scope of variables in JavaScript?

U forgot to set the `unshift(this.message);` to `unshift(that.message);`. Thanks anyway! And also thanks for the link. I will look into it. — Giesburts, Mar 31 '17 at 07:48

Interval Vue.js not working

2 Answers2