间隔 Vue.js 不工作答案

【问题标题】：Interval Vue.js not working间隔 Vue.js 不工作
【发布时间】：2017-03-31 07:32:31
【问题描述】：

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

未捕获的类型错误：无法读取未定义的属性“unshift”

只是一个常规的警报框正在工作。所以我猜这个变量不能被访问。如何访问message 的变量？我在下面添加了一个jsfiddle。

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/

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

这是因为你在setInterval 中丢失了正确的上下文，所以 this 不受 Vue 对象的限制，this.message 会返回 undefined。你可以使用箭头函数来解决这个问题，或者将上下文保留在另一个变量中。

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


}

【讨论】：

已经认为类似的事情是问题所在。但是，我现在知道确切的问题是什么。感谢您的帮助！

【解决方案2】：

你不能在 function(){} 中使用 this 来调用外部变量，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?

【讨论】：

你忘记将unshift(this.message); 设置为unshift(that.message);。不管怎么说，还是要谢谢你！也感谢您的链接。我会调查的。