From 7032cc66b4219fa75c9b44676bc396c63bca0035 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 19 Nov 2023 15:19:10 +0300
Subject: [PATCH] added vision for array - chathistory

---
 luckydiamond/src/pages/ChatElement.vue | 112 +++++++------------------
 1 file changed, 29 insertions(+), 83 deletions(-)

diff --git a/luckydiamond/src/pages/ChatElement.vue b/luckydiamond/src/pages/ChatElement.vue
index ce53c2e..17a6d48 100644
--- a/luckydiamond/src/pages/ChatElement.vue
+++ b/luckydiamond/src/pages/ChatElement.vue
@@ -10,88 +10,23 @@
         </div>
       </div>
     </div>
-    <div class="chat__content--users">
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
-      <div class="card__user">
-        <div class="user__icon">
-          <img src="@/assets/icons-test/person-icon-chat.png">
-        </div>
-        <div class="content">
-          <h1>User Name</h1>
-          <p>msg content</p>
-        </div>
-      </div>
+    <div class="chat__content--users" @dataclaim="ClaimDatamsg">
+      <ul>
+        <li
+            v-for="msg in array"
+            :key="msg"
+        >
+          <div class="card__user">
+            <div class="user__icon">
+              <img :src="msg.icon">
+            </div>
+            <div class="content">
+              <h1>{{ msg.username }}</h1>
+              <p>{{ msg.msg }}</p>
+            </div>
+          </div>
+        </li>
+      </ul>
     </div>
     <writechat-component></writechat-component>
   </aside>
@@ -99,10 +34,21 @@
 
 <script>
 import '@/assets/css/ElementsStyles/chat.css'
+import ChatHistory from "@/mocks/ChatHistory";
 import WritechatComponent from "@/components/WritechatComponent.vue";
 
 export default {
-  components: { WritechatComponent }
+  components: { WritechatComponent },
+  data() {
+    return {
+      array: ChatHistory
+    }
+  },
+  methods: {
+    ClaimDatamsg() {
+      this.array = ChatHistory
+    }
+  }
 }
 </script>