Soy nuevo en Vuejs. Estoy tratando de establecer un intervalo para una función. Lamentablemente no funciona. Me sale el siguiente error:

TypeError no capturado: no se puede leer la propiedad 'unshift' de undefined

Solo un cuadro de alerta regular ESTÁ funcionando. Así que supongo que no se puede acceder a la variable. ¿Cómo puedo acceder a la variable de message? Agregué un jsfiddle a continuación.

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/

1
Giesburts 31 mar. 2017 a las 10:32

2 respuestas

La mejor respuesta

Es porque perdió el contexto correcto en setInterval, por lo que esto no está limitado al objeto Vue y this.message volvería indefinido. Puede usar la función de flecha para resolver esto, o mantener el contexto dentro de la otra 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);


}

O

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


}
5
Belmin Bedak 31 mar. 2017 a las 07:38

NO puede usar esto en la función () {} para llamar a variables externas, la función () {} crea un nuevo alcance, puede modificar su código de esta manera:

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

O puede usar la función de flecha de esta manera:

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

Puede obtener más información sobre el alcance variable de JavaScript en esta pregunta: ¿Cuál es el alcance? de variables en JavaScript?

1
Community 23 may. 2017 a las 11:46