I have a requirement to update data periodically by calling a function in my Vue.js application. I am looking to call the 'listar()' method every 30 seconds and store the response in a property of vue js.
If anyone can guide me on where to locate this property in vue js, I would greatly appreciate it. I will explore all the comments for insights.
<script>
export default {
methods: {
listar(){
let me=this;
me.mesas=[];
axios.get('api/mesas/ListarTodos').then(function(response){
//console.log(response);
me.mesas=response.data;
me.loading=false;
}).catch(function(error){
console.log(error);
});
},
}
</script>
However, the initial implementation did not work as expected.
setTimeout(() => {
//
}, 300)
Update:
The latest code implementation works well for me, but there is an issue with the polling method when navigating to another page in our single page application (SPA). The setInterval continues running even after switching pages.
I tried using clearInterval() but it doesn't stop the method from executing once I change the component/page. It only clears the interval the first time I switch pages.
For more information, you can refer to the following link:
<script>
import axios from 'axios'
export default {
data () {
return {
polling: null,
},
methods: {
listar(){
let me=this;
me.mesas=[];
axios.get('api/mesas/ListarTodos').then(function(response){
//console.log(response);
me.mesas=response.data;
me.loading=false;
}).catch(function(error){
console.log(error);
});
pollData () {
this.polling = setInterval(() => {
this.listar();
}, 3000) },
},
created () {
this.pollData()
},
beforeDestroy () {
clearInterval(this.polling)
},
}
</script>