Question

Interval Vue.js 不工作

2017-03-31

5796

javascript vue.js vuejs2

我是 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 将返回未定义。您可以使用箭头函数来解决这个问题，或者将上下文保存在另一个变量中。

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 变量作用域的更多信息： JavaScript 中变量的作用域是什么？