Watching for data change in vue.js

JavaScript
1

In my apiData: [] there’s a time object that updates on the backend every second. The only way I can see the time change is when I refresh the page. However, I don’t want the page to refresh but rather set the fetch API on a setInterval so I can see the time change every second. So I did that but all it does is adds to my data instead of replacing it with refreshed data. I hope this makes sense. How do I fix this?

Also, I realize this is incomplete as I don’t need to share all of my other code since I am working for a compnay, I don’t want to share other important information.

	data: function() {
			return {
			message: 'We are live',
			date: new Date().getTime(),
			time: '',
			apiData: [],

            created(){
              this.fetchAPI()
             }

           fetchAPI(){
             setInterval(() => {
				fetch(`url`)
				.then((response) => response.json())
				.then(results => {
					console.log('Success', results);
					if(results.success){
						this.apiData = this.apiData = results.data.stats;
						this.sortData();
					}else{
						console.log('Error', results);
					}


				}).catch((error) => {
					console.log('Error', error);
				});
			})          }
          

``
2

Are you getting any errors or warnings in your console? Also, do you have Vue devtools installed? Check the component in the devtools and see if apiData is itself wrong or if you just have a render problem, because I’m not seeing how that code would result in it being appended.

Also, you appear to be missing the second argument to setInterval

1 Like
3

You are freakin awesome. In the sortData() I was sorting out objects and pushing them to this.servers. Not realizing .push() appends.

So I fixed it and now everything is working :slight_smile: