I'm attempting to achieve a specific goal using Vue, but I'm uncertain if it's feasible given my current struggles in obtaining the desired outcome:
An API endpoint returns an array containing multiple objects.
While I am able to successfully render this data in my Vue application, I am curious if Vue has the capability to "track" updates to the array and automatically display new objects in the view.
Currently, I use setInterval to perform a GET request every 10 minutes, updating the object within my data() as intended. However, these changes are not reflected in the view.
To trigger a re-render, I toggle a boolean value from true to false at the start and end respectively, forcing the view to update with v-if.
My objective is to create a straightforward Twitter feed app that periodically fetches tweets via a GET request every 10 minutes, populates them into my Vue instance, and displays them in the view without requiring page reloads or component re-renders - essentially an automatic Twitter feed continuously loading new tweets every 10 minutes.
Is this achievable? I've experimented with utilizing Vue's Vue.set() method but haven't observed any impact.
If this approach isn't viable, what would be an alternative way to implement similar functionality?
Below is the provided code snippet:
JavaScript:
new Vue({
el: '#app',
data: {
items: [],
},
created() {
this.load();
setInterval(() => this.load(), 5000);
},
methods: {
load() {
axios.get('https://reqres.in/api/users?page=2')
.then(response => {
this.items = response.data.data;
});
}
}
});
HTML
<div id="app">
<p v-for="item in items">
{{ item.first_name }}
</p>
</div>
CodePen: https://codepen.io/tomhartley97/pen/VwZpZNG
In the presented code, instances where the array is updated through the GET request fail to exhibit changes in the view?