I am trying to retrieve the last "message" from each object in my data, but I am unsure of how to accomplish this. Here is a snippet of the data:
{
data: {
contacts: [
{
name: 'Michele',
avatar: '_1',
visible: true,
messages: [
{
date: '10/01/2020 15:30:55',
message: 'Hai portato a spasso il cane?',
status: 'sent'
},
{
date: '10/01/2020 15:50:00',
message: 'Ricordati di stendere i panni',
status: 'sent'
},
{
date: '10/01/2020 16:15:22',
message: 'Tutto fatto!',
status: 'received'
}
],
},
{
name: 'Fabio',
avatar: '_2',
visible: true,
messages: [
{
date: '20/03/2020 16:30:00',
message: 'Ciao come stai?',
status: 'sent'
},
{
date: '20/03/2020 16:30:55',
message: 'Bene grazie! Stasera ci vediamo?',
status: 'received'
},
{
date: '20/03/2020 16:35:00',
message: 'Mi piacerebbe ma devo andare a fare la spesa.',
status: 'sent'
}
],
}
]
}
}
I am looking to extract the last message from each conversation, such as 'Tutto fatto!'
This is what I have so far:
<div v-for="(item, index) in contacts" class="col-12 d-flex justify-content-between align-items-center py-3 px-3">
<div class="d-flex"> <img class="profile-pic me-3" :src="'img/avatar' + item.avatar + '.jpg'" alt="userpic">
<div>
<div class="fw-bold">{{item.name}}</div>
<p class="text-secondary"> Last message sent</p>
</div>
</div>
<div class="text-secondary mb-5">12:00</div>
</div>