It shows all index but not the last one.
My output:
-
first message
-
second message
It doesn’t shows the third message, I’m learning vuetify, and I don’t see an answer on internet…
This is my code:
<template>
<v-card
v-for="item of messages"
:key="item.id"
width="300"
class="mb-3"
theme="dark"
color="#1F7087"
:subtitle="item.displayName"
:text="item.text"
:class="item.uid === userChat.uid && 'ml-auto' "
:color="item.uid == userChat.uid ? 'success' : '555'"
></v-card>
</template>
<script setup>
import { ref } from 'vue';
const userChat = ref({uid: "001"});
const messages = ref([
{
id: 1,
text: "First message",
uid: "001",
time: Date.now(),
displayName: "Alejandro"
},
{
id: 2,
text: "second message",
uid: "001",
time: Date.now(),
displayName: "Alejandro"
},
]);
</script>