I'm brand new to Vuejs and I'm attempting to set an interval for a function, but unfortunately it's not working as expected. Instead, I am encountering the following error:
Uncaught TypeError: Cannot read property 'unshift' of undefined
Oddly enough, a standard alert box works just fine. It seems like the variable cannot be accessed properly. How can I ensure that I can access the variable message? You can find my code in the JSFiddle link 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(() => {
this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
this.messages.unshift(this.message);
}, 5000);
}
}
});