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);


        }



    }

});

/

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/fLj5ac0L/

• javascript
• vue.js
• vuejs2

2 Answers 2

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);


}

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?