From 43ff204a5ccc8f7244c63bb8dad61c58c88c4d5c Mon Sep 17 00:00:00 2001
From: Pavel <sam0kat4ik@mail.ru>
Date: Tue, 24 Dec 2024 13:59:10 +0500
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D0=BC=D0=B5=D1=87=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=BD=D1=8B=D0=B5=20Email-=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../40-marked-emails/MarkedEmailsApp.js       | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/02-basics-2/40-marked-emails/MarkedEmailsApp.js b/02-basics-2/40-marked-emails/MarkedEmailsApp.js
index 8de9625..8482737 100644
--- a/02-basics-2/40-marked-emails/MarkedEmailsApp.js
+++ b/02-basics-2/40-marked-emails/MarkedEmailsApp.js
@@ -32,19 +32,39 @@ export const emails = [
 export default defineComponent({
   name: 'MarkedEmailsApp',
 
-  setup() {},
+  setup() {
+    const search = ref(null)
+    const email = ref(emails)
+
+    const emailMarked = computed(() => {
+      return email.value.map((mail) => {
+        if (mail.indexOf(search.value) !== -1 && search.value !== "") {
+          return {
+            mail: mail,
+            marked: true,
+          }
+        }
+        return {
+          mail: mail
+        }
+      })
+    })
+
+    return {
+      search,
+      emailMarked,
+      email
+    }
+  },
 
   template: `
     <div>
       <div class="form-group">
-        <input type="search" aria-label="Search" />
+        <input v-model="search" type="search" aria-label="Search" />
       </div>
       <ul aria-label="Emails">
-        <li>
-          Eliseo@gardner.biz
-        </li>
-        <li class="marked">
-          Jayne_Kuhic@sydney.com
+        <li :class="{'marked': mail.marked}" v-for="mail in emailMarked" >
+          {{ mail.mail }}
         </li>
       </ul>
     </div>