task-04 all 3

js-tasks-ru · Dec 17, 2024 · b3097bf · b3097bf
1 parent ba1a70f
commit b3097bf
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/04-sfc/10-MeetupView-script-setup/MeetupCover.vue b/04-sfc/10-MeetupView-script-setup/MeetupCover.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 
+// Define props directly in the script setup
 const props = defineProps({
   title: {
     type: String,

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue b/04-sfc/10-MeetupView-script-setup/MeetupDescription.vue
@@ -21,7 +21,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="meetup-description">{{ description }}</div>
+<div class="meetup-description" v-html="description"></div>
 </template>
 
 <style scoped>

diff --git a/04-sfc/10-MeetupView-script-setup/MeetupView.vue b/04-sfc/10-MeetupView-script-setup/MeetupView.vue
@@ -1,47 +1,37 @@
 <script setup>
-import { ref, watchEffect } from 'vue'
 import { UiAlert, UiContainer } from '@shgk/vue-course-ui'
 import MeetupAgenda from './MeetupAgenda.vue'
 import MeetupDescription from './MeetupDescription.vue'
 import MeetupCover from './MeetupCover.vue'
 import MeetupInfo from './MeetupInfo.vue'
 
-const programData = ref([]); 
-
-const agendaData = ref([
-
-]);
-
-watchEffect(() => {
-  if (agendaData.value.length === 0) {
-    programData.value = []
-  } else {
-    programData.value = agendaData.value
-  }
+const props = defineProps({
+  meetup: {
+    type: Array,
+    required: true,
+  },
 })
 </script>
 
 <template>
   <div>
     <UiContainer>
-      <MeetupCover title="Демо-Митап" image="cover-image.jpg" />
+      <MeetupCover :title="props.meetup.title" :image="props.meetup.image" />
 
       <div class="meetup">
         <div class="meetup__content">
           <h2>Описание</h2>
-          <MeetupDescription description="Описание демонстрационного митапа" />
+          <MeetupDescription :description="props.meetup.description" />
 
           <h2>Программа</h2>
 
-          <UiAlert v-if="agendaData.length === 0" type="info">
-            Программа пока пуста...
-          </UiAlert>
+          <UiAlert v-if="props.meetup.agenda.length === 0" type="info"> Программа пока пуста... </UiAlert>
 
-          <MeetupAgenda :agenda="agendaData" v-else />
+          <MeetupAgenda v-else :agenda="props.meetup.agenda" />
         </div>
 
         <div class="meetup__aside">
-          <MeetupInfo organizer="Demo Organizer" place="Conference Hall A" :date="1627545600000" />
+          <MeetupInfo :organizer="props.meetup.organizer" :place="props.meetup.place" :date="props.meetup.date" />
           <div class="meetup__aside-buttons"></div>
         </div>
       </div>
@@ -56,7 +46,8 @@ watchEffect(() => {
   margin: 48px 0 0;
 }
 
-.meetup__content {}
+.meetup__content {
+}
 
 .meetup__aside {
   margin: 40px 0;