portal-vue 사용법 > :class +:ref + this.$refs

pages/instructor/heroes/index.vue

@@ -2,8 +2,10 @@
   <div class="heroes-page">
     <div class="container">
       <h1 class="title">Course Heroes</h1>
-      <portal-target name="modal-view-hero-1" />
-      <portal-target name="modal-view-hero-2" />
+      <portal-target
+        v-for="hero in heroes"
+        :key="hero._id"
+        :name="`modal-view-${hero._id}`" />
       <table class="heroes-table table is-responsive">
         <thead>
           <tr class="main-table-row">
@@ -14,56 +16,34 @@
           </tr>
         </thead>
         <tbody>
-          <tr @click="openModal('1')" class="table-row">
-            <td>Hero Image</td>
-            <td>Hero Title</td>
-            <td>Hero Subtitle</td>
-            <td>Active/ Inactive</td>
+          <tr
+            v-for="hero in heroes"
+            :key="hero._id"
+            @click="openModal(hero._id)"
+            :class="{'isActive': activeHero._id === hero._id}"
+            class="table-row"
+          >
+            <td>{{hero.image || 'Not Set'}}</td>
+            <td>{{hero.title || 'Not Set'}}</td>
+            <td>{{hero.subtitle || 'Not Set'}}</td>
+            <td>{{activeHero._id === hero._id ? 'Active' : 'Inactive'}}</td>
             <td class="modal-td" v-show="false">
-            <portal to="modal-view-hero-1">
+            <portal :to="`modal-view-${hero._id}`">
               <Modal
-                ref="modal-1"
+                :ref="`modal-${hero._id}`"
                 :showButton="false"
                 actionTitle="Make Active"
                 openTitle="Favorite"
                 title="Make Course Hero">
                 <div>
                   <div class="subtitle">
-                    Title: Some Title
+                    Title: {{hero.title || 'Not Set'}}
                   </div>
                   <div class="subtitle">
-                    Subtitle: Some Subtitle
+                    Subtitle: {{hero.subtitle || 'Not Set'}}
                   </div>
                   <figure class="image is-3by1">
-                    <img>
-                  </figure>
-                </div>
-              </Modal>
-            </portal>
-            </td>
-          </tr>
-          <tr @click="openModal('2')" class="table-row">
-            <td>Hero Image</td>
-            <td>Hero Title</td>
-            <td>Hero Subtitle</td>
-            <td>Active/ Inactive</td>
-            <td class="modal-td" v-show="false">
-            <portal to="modal-view-hero-2">
-              <Modal
-                ref="modal-2"
-                :showButton="false"
-                actionTitle="Make Active"
-                openTitle="Favorite"
-                title="Make Course Hero">
-                <div>
-                  <div class="subtitle">
-                    Title: Some Title 2
-                  </div>
-                  <div class="subtitle">
-                    Subtitle: Some Subtitle 2
-                  </div>
-                  <figure class="image is-3by1">
-                    <img>
+                    <img :src="hero.image">
                   </figure>
                 </div>
               </Modal>
@@ -85,6 +65,9 @@ export default {
   computed: {
     heroes() {
       return this.$store.state.instructor.heroes
+    },
+    activeHero() {
+      return this.$store.state.hero.item
     }
   },
   async fetch({store}) {
@@ -92,7 +75,8 @@ export default {
   },
   methods: {
     openModal(modalId) {
-      this.$refs[`modal-${modalId}`].openModal()
+      const modal = this.$refs[`modal-${modalId}`][0]
+      modal.openModal()
     }
   }
 }
@@ -107,8 +91,6 @@ export default {
     font-size: 45px;
     font-weight: bold;
   }
-  .isActive {
-  }
   .table-row {
     margin: 20px;
     &.isActive {