refactor code for send and claim data msg

luckydiamond/src/components/WritechatComponent.vue

@@ -14,14 +14,13 @@
 </template>
 
 <script>
-import ChatHistory from "@/mocks/ChatHistory";
 
 export default {
   data() {
     return {
       msg: '',
       username: 'TEST USER',
-      icon: '@/assets/icon-test/person-icon-chat.png'
+      icon: require('../assets/icons-test/person-icon-chat.png'),
     }
   },
   methods: {
@@ -29,18 +28,8 @@ export default {
       return this.msg === ''
     },
     SendmsgData() {
-      const object = {
-        msg: this.msg,
-        username: this.username,
-        icon: this.icon
-      }
-
-      ChatHistory.push(object)
-      console.log(ChatHistory)
-
+      this.$emit('send', [this.msg, this.username, this.icon])
       this.msg = ''
-
-      return this.$emit('dataclaim')
     }
   }
 }

luckydiamond/src/mocks/ChatHistory.js

@@ -1,3 +0,0 @@
-export default [
-
-]

luckydiamond/src/pages/ChatElement.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="chat__content--users" @dataclaim="ClaimDatamsg">
+    <div class="chat__content--users">
       <ul>
         <li
             v-for="msg in array"
@@ -28,25 +28,32 @@
         </li>
       </ul>
     </div>
-    <writechat-component></writechat-component>
+    <writechat-component @send="ClaimDatamsg"></writechat-component>
   </aside>
 </template>
 
 <script>
 import '@/assets/css/ElementsStyles/chat.css'
-import ChatHistory from "@/mocks/ChatHistory";
 import WritechatComponent from "@/components/WritechatComponent.vue";
 
 export default {
   components: { WritechatComponent },
   data() {
     return {
-      array: ChatHistory
+      array: [],
+      id: 0,
     }
   },
   methods: {
-    ClaimDatamsg() {
-      this.array = ChatHistory
+    ClaimDatamsg(msg) {
+      const MsgUser = {
+        id: this.id + 1,
+        msg: msg[0],
+        username: msg[1],
+        icon: msg[2]
+      }
+
+      this.array.push(MsgUser)
     }
   }
 }