The issue at hand
I am facing a challenge in ensuring my page automatically updates when new data is available. I am using Ionic, and have a page that displays all the items collected by the user in a visually appealing manner using an ion-grid.
To achieve this, I utilize a v-for loop to create a column for each element:
<ion-grid>
<ion-row class="ion-justify-content-around">
<ion-col v-for="item in collected" :key="item" size="5.5" @click="openDetails(item)">
<div class="img-card">
<img :id="`user-photo-${item.id}-${item.dType}`" :src="getSourcePhoto(item.id, item.dType)"/>
<div class="title-holder">
<p>{{ formatTitle(getDiscovery(item.id, item.dType)) }}</p>
</div>
</div>
</ion-col>
</ion-row>
</ion-grid>
The collected array contains the user's items and is populated as follows:
import { UserData } from '@/internal/databases/UserData';
// Other imports
export default {
components: {
IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonIcon
},
data() {
return {
collected: UserData.getCollectedChronologically(),
getDiscovery: Utils.getDiscovery,
}
},
/* ... etc. */
}
However, whenever a user adds a new item, the page does not update instantly due to caching. The newly added item gets included in
UserData.data.collected.chronologicallyApproaches attempted
I experimented with watching the method, which proved ineffective:
watch: {
'UserData.getCollectedChronologically'() {
console.log("Fired!");
this.$forceUpdate();
}
}
I also explored creating a public attribute UserData.collectedCount and utilizing the same watcher with no success. While I understand the potential of Vuex, it is not a viable solution for me. How can I resolve this persistence issue?