coments screen with same component

src/components/cpmCard.vue

@@ -1,48 +1,38 @@
 <template>
     <div>
 
-        <v-card class="rounded-xl" max-height="900px" max-width="600px">
+        <v-card v-if="cardData" class="rounded-xl" max-height="900px" max-width="600px">
 
             <v-app-bar color="white" class="d-flex align-center" dense>
 
                 <v-avatar size="36" color="orange">
-                    <v-icon v-if="!card.user.avatar" dark>mdi-account-circle</v-icon>
-                    <img v-else :src="card.user.avatar" alt="avatar">
+                    <v-icon v-if="!cardData.user.avatar" dark>mdi-account-circle</v-icon>
+                    <img v-else :src="cardData.user.avatar" alt="avatar">
                 </v-avatar>
-
-                <div class="ml-3">{{card.name}}</div>
 
                 |
 
-                <div class="ml-3">{{card.user.name}}</div>
+                <div class="ml-3">{{cardData.user.name}}</div>
 
 
-                <div class="ml-3">{{card.eventDate}}</div>
+                <div class="ml-3">{{cardData.eventDate}}</div>
 
             </v-app-bar>
 
-            <v-img contain max-width="600px" max-height="600px" :src="card.img"></v-img>
+            <v-img contain max-width="600px" max-height="600px" :src="cardData.img"></v-img>
 
             <v-card-title>
-                <h2>{{card.title}}</h2>
+                <h2>{{cardData.title}}</h2>
             </v-card-title>
 
             <v-card-text>
-                <p>{{card.description}}</p>
+                <p>{{cardData.description}}</p>
             </v-card-text>
 
-            <!-- <v-card-subtitle>
-                <p>Criado em {{card.createdAt}}</p>
-            </v-card-subtitle> -->
-
             <v-expansion-panels>
                 <v-expansion-panel>
                     <v-expansion-panel-header>Comentários</v-expansion-panel-header>
-                        <v-expansion-panel-content v-for="(comment, i) in card.comments" :key="i">
-                            <!-- {{comment.user}}: {{comment.comment}} -->
-                        <!-- <v-avatar size="35">
-                            <v-img :src="user.avatar"></v-img>
-                        </v-avatar> -->
+                        <v-expansion-panel-content v-for="(comment, i) in cardData.comments" :key="i">
                             {{comment.user.name}}: {{comment.comment}}
                         </v-expansion-panel-content>
                 </v-expansion-panel>
@@ -59,7 +49,7 @@ export default {
     props: ['cardData'],
     data() {
         return {
-            card: this.cardData
+            
         }
     },
 

src/views/private/Coment.vue

@@ -1,22 +1,44 @@
 <template>
     <div>
-        <EventCard/>
+        <EventCard :cardData="dataEventResult"/>
     </div>
 </template>
 <script>
-import EventCard from '../../components/EventCard/EventCard'
+import EventCard from '../../components/cpmCard'
+import {
+  mapActions, mapGetters
+} from 'vuex'
 export default {
     components:{
         EventCard
     },
     data:() => ({
 
+        dataEventResult:'',
+
     }),
+    computed:{
+        ...mapGetters({
+            eventDataId: 'EventVuex/eventDataId'
+        })
+    },
+
     methods:{
 
+        ...mapActions({
+            getEventById: 'EventVuex/getEventById'
+        }),
+
+        async getEventComents(){
+            
+            let resultRequest = await this.getEventById(3)
+            this.dataEventResult = resultRequest
+        }
+
     },
-    created(){
 
+    created(){
+        this.getEventComents()
     }
 }
 </script>