间隔 Vue.js 无效

Question

我是 Vuejs 新手。我正在尝试为函数设置间隔。不幸的是它不起作用。我从中得到以下错误：

Uncaught TypeError: Cannot read property 'unshift' of undefined

只是一个普通的警告框在工作。所以我猜无法访问该变量。如何访问 message 的变量？我在下面添加了一个jsfiddle。

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/

Answer 1

这是因为你在 setInterval 中丢失了正确的上下文，所以它没有绑定到 Vue 对象并且 this.message return undefined.You 可以使用箭头函数来解决这个问题，或者将上下文保留在另一个变量中。

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


}

或

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


}

Answer 2

你不能在 function(){} 中使用它来调用外部变量，function(){} 创建一个新的作用域，你可以像这样修改你的代码：

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

或者你可以像这样使用箭头函数：

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

您可以在这个问题上获得更多关于 JavaScript 变量范围的信息：What is the scope of variables in JavaScript?

间隔 Vue.js 无效

Interval Vue.js not working

javascript

vue.js

vuejs2