In my current project, I am faced with the challenge of including avatars in notifications. Despite my efforts, I have not been able to solve this issue independently. The Vue.js template below demonstrates how I have attempted to add avatars to each notification:
<li class="notification" v-for="(notification, index) in notifications">
<a>
<span class="image">
<img :src="notification.avatar" alt="Avatar" />
</span>
<span class="link">
<span v-text="notification.data.sender_name"></span>
</span>
<span class="message" v-text="notification.data.message"></span>
</a>
</li>
Below is a snippet of the accompanying JavaScript:
data() {
return {
user: this.initialUser,
notifications: this.initialUser.unread_notifications,
}
},
created() {
let self = this;
self.notifications = this.initialUser.unread_notifications;
self.notifications.forEach(function(notification) {
if(notification.data.sender_id) {
axios.post(self.user.path + '/get-avatars', {
id: notification.id,
}).then((response) => {
notification.avatar = response.data;
});
}
});
},
The main issue I am encountering is that the v-for loop executes before the created() method finishes running. Consequently, the avatar property is missing from the notifications object during the iteration.
I'm seeking advice on whether there is a way to ensure that the v-for only proceeds after the completion of the created() method. Any help or suggestions would be greatly appreciated!
Thank you in advance!