starting coment screen

src/components/EventCard/EventCard.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <div class="p15 mt-10" v-for="(item, i) in dataEventResult" :key="i">
+
+            <v-card max-width="500" class="ac cp card-style-1">
+
+                <img :src='item.img' class="img-size">
+
+                <div class="p10 alg-txt-s">
+                    <h4 class="clr-red">{{ item.eventDate }}</h4>
+                    <h1 class="mt-1">{{ item.title }}</h1>
+                    <span class="mt-2 display-b">Criado por <strong>{{ item.user.name }}</strong> </span>
+                </div>
+
+                <v-divider class="mt-2"></v-divider>
+                <div class="p10 d-flex">
+
+                    <div class="d-block">
+                        <v-avatar class="cp" color="orange" size="62">
+                            <v-icon v-if="!item.user.avatar" dark>mdi-account-circle</v-icon>
+                            <img v-else :src="item.user.avatar" alt="avatar" />
+                        </v-avatar>
+                    </div>
+
+                </div>
+
+
+            </v-card>
+
+        </div>
+
+        <!-- <h1>conteuno: {{ eventDataId }}</h1> -->
+    </div>
+</template>
+<script>
+import {
+  mapActions, mapGetters
+} from 'vuex'
+export default {
+    data:() => ({
+        url:process.env.VUE_APP_BASE_URL,
+
+        dataEventResult:[]
+    }),
+
+    computed:{
+        ...mapGetters({
+            eventDataId: 'EventVuex/eventDataId'
+        })
+    },
+
+    methods:{
+
+        ...mapActions({
+            getEventById: 'EventVuex/getEventById'
+        }),
+
+        async getEventComents(){
+            
+            let resultRequest = await this.getEventById(3)
+            // console.log("jusadiosaihdsahiudsaihduiah")
+            // console.log(resultRequest)
+            this.dataEventResult.push(resultRequest)
+        }
+
+    },
+
+    created(){
+        this.getEventComents()
+    }
+}
+</script>
+<style>
+    .card-coment{
+        display: block;
+        border-top: 1px solid rgba(78, 78, 78, 0.644) !important
+    }
+</style>

src/components/cpmCard.vue

@@ -6,7 +6,7 @@
             <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>
+                    <v-icon v-if="!card.user.avatar" dark>mdi-account-circle</v-icon>
                     <img v-else :src="card.user.avatar" alt="avatar">
                 </v-avatar>
 

src/router/index.js

@@ -51,6 +51,11 @@ const routes = [
         path: '/Profile',
         name: 'Profile',
         component: () => import('../views/private/Profile.vue')
+      },
+      {
+        path: '/Coment/1',
+        name: 'Coment',
+        component: () => import('../views/private/Coment.vue')
       }
 
     ]

src/store/modules/EventVuex.js

@@ -1,17 +1,38 @@
 
+import axios from '../../util/axios'
+
+
 export default {
 
   namespaced: true,
 
   state: {
+    eventDataId:''
   },
 
   getters: {
+    eventDataId: state=> state.eventDataId
   },
 
   mutations: {
+    setEventDataId(state, newState){
+      state.eventDataId = newState
+    }
   },
 
   actions: {
+    async getEventById(context, newData){
+
+      const eventResult = await axios.get(process.env.VUE_APP_BASE_URL + `/event/${newData}`)
+      try {
+        context.commit('setEventDataId', eventResult.data)
+        return eventResult.data
+      }
+
+      catch{
+        console.log(eventResult)
+      }
+
+    }
   }
 }

src/views/private/Coment.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <EventCard/>
+    </div>
+</template>
+<script>
+import EventCard from '../../components/EventCard/EventCard'
+export default {
+    components:{
+        EventCard
+    },
+    data:() => ({
+
+    }),
+    methods:{
+
+    },
+    created(){
+
+    }
+}
+</script>