From 18c72f0aebf742e49eb338c858d590f8567058ee Mon Sep 17 00:00:00 2001
From: Pavel <sam0kat4ik@mail.ru>
Date: Wed, 25 Dec 2024 02:04:13 +0500
Subject: [PATCH] =?UTF-8?q?=D0=92=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B9=20=D0=BC=D0=B8=D1=82=D0=B0=D0=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../50-selected-meetup/SelectedMeetupApp.js   | 76 +++++++------------
 1 file changed, 26 insertions(+), 50 deletions(-)

diff --git a/02-basics-2/50-selected-meetup/SelectedMeetupApp.js b/02-basics-2/50-selected-meetup/SelectedMeetupApp.js
index dad23b8..fdb5d29 100644
--- a/02-basics-2/50-selected-meetup/SelectedMeetupApp.js
+++ b/02-basics-2/50-selected-meetup/SelectedMeetupApp.js
@@ -1,75 +1,51 @@
-import { defineComponent } from 'vue'
-// import { getMeetup } from './meetupsService.ts'
+import { defineComponent, ref, watchEffect } from 'vue'
+import { getMeetup } from './meetupsService.ts'
 
 export default defineComponent({
   name: 'SelectedMeetupApp',
 
-  setup() {},
+  setup() {
+    const metupId = ref(1)
+    const meetup = ref({})
+    watchEffect(async () => {
+      await getMeetup(metupId.value).then((data) => {
+        meetup.value = data
+      })
+    })
+
+
+    return {
+      meetup,
+      metupId
+    }
+  },
 
   template: `
     <div class="meetup-selector">
       <div class="meetup-selector__control">
-        <button class="button button--secondary" type="button" disabled>Предыдущий</button>
+        <button @click="metupId--" class="button button--secondary" type="button" :disabled="metupId < 2">Предыдущий</button>
 
         <div class="radio-group" role="radiogroup">
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-1"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="1"
-            />
-            <label for="meetup-id-1" class="radio-group__label">1</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-2"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="2"
-            />
-            <label for="meetup-id-2" class="radio-group__label">2</label>
-          </div>
-          <div class="radio-group__button">
+          <div v-for="id in 5" class="radio-group__button">
             <input
-              id="meetup-id-3"
+              :id="\`meetup-id-\${id}\`"
               class="radio-group__input"
               type="radio"
               name="meetupId"
-              value="3"
+              :value="id"
+              v-model="metupId"
             />
-            <label for="meetup-id-3" class="radio-group__label">3</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-4"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="4"
-            />
-            <label for="meetup-id-4" class="radio-group__label">4</label>
-          </div>
-          <div class="radio-group__button">
-            <input
-              id="meetup-id-5"
-              class="radio-group__input"
-              type="radio"
-              name="meetupId"
-              value="5"
-            />
-            <label for="meetup-id-5" class="radio-group__label">5</label>
+            <label :for="\`meetup-id-\${id}\`" class="radio-group__label">{{id}}</label>
           </div>
+
         </div>
 
-        <button class="button button--secondary" type="button">Следующий</button>
+        <button @click="metupId++" :disabled="metupId > 4" class="button button--secondary" type="button">Следующий</button>
       </div>
 
       <div class="meetup-selector__cover">
         <div class="meetup-cover">
-          <h1 class="meetup-cover__title">Some Meetup Title</h1>
+          <h1 class="meetup-cover__title">{{meetup.title}}</h1>
         </div>
       </div>