Penerapan Directive pada Komponen Vue.js

Setelah kita mempelajari directive-directive yang ada pada Vue.js maka kita akan menerapkan dalam source code kita.

Penerapan directive pada komponen Vue.js adalah seperti pada contoh berikut ini

1. Penerapan pada PesanSosalKomentar.vue
   Bagian script:
   
   
   Bagian template:
   
   
   Bagian style:
   

   <template>
     <div>
       <p>Comments:</p>
       <div v-for="(comment, index) in comments">
         <strong>Ini komentar nomor {{index}}</strong>
         <p>{{ comment }}</p>
   
       </div>
     </div>
   </template>
   
   <script setup>
     const props = defineProps({
       comments: Array
     });
   </script>
   
   <style lang="scss">
   </style>
   

2. Penerapan pada PesanSosial.vue
   Bagian script:
   
   
   Bagian template:
   
   
   Bagian style:
   

   <template>
     <div
       class="PesanSosial"
       :class="{ PesanSosial__selected: selected }"
       @click="selected = !selected"
     >
       <div class="header">
         <img class="avatar" :src="avatarSrc" />
         <div class="name">{{ username }}</div>
         <div class="userId">{{ userId }}</div>
       </div>
       <div class="post" v-text="post"></div>
       <button
         v-show="comments.length > 0"
         @click="showComments = !showComments"
       >Tampilkan Komentar</button>
       <PesanSosialKomentar
         v-if="showComments"
         :comments="comments"
       />
     </div>
   </template>
   
   <script setup>
   import { onMounted, ref } from 'vue';
   import PesanSosialKomentar from './PesanSosialKomentar.vue';
   
   const selected = ref(false);
   const showComments = ref(false);
   
   const props = defineProps({
     username: String,
     userId: Number,
     avatarSrc: String,
     post: String,
     comments: Array
   });
   
   onMounted(() => {
     console.log(props.username)
   });
   </script>
   
   <style lang="scss">
   .PesanSosial {
     &__selected {
       border: blue solid 1px;
     }
     .header {
       display: flex;
       align-items: center;
       margin-bottom: 8px;
     }
     .avatar {
       border-radius: 50%;
       margin-right: 12px;
     }
     .name {
       font-weight: bold;
       margin-right: 8px;
       color: white;
     }
   }
   </style>
   

3. Penerapan pada TheWelcome.vue
   Bagian script:
   
   
   Bagian template:
   

   <template>
     <PesanSosial
       :username="posts[0].username"
       :userId="posts[0].userId"
       :avatarSrc="posts[0].avatar"
       :post="posts[0].post"
       :comments="posts[0].comments"
     ></PesanSosial>
   
     <PesanSosial
       :username="posts[1].username"
       :userId="posts[1].userId"
       :avatarSrc="posts[1].avatar"
       :post="posts[1].post"
       :comments="posts[1].comments"
     ></PesanSosial>
   </template>
   
   <script setup>
   import { reactive } from 'vue';
   import PesanSosial from './molecules/PesanSosial.vue';
   
   const posts = reactive([
     {
       username: 'Username satu',
       userId: 22,
       avatar: 'https://i.pravatar.cc/40',
       post: 'Posting ke satu',
       comments:[
         "Postingan bagus",
         "Sangat menakjubkan",
       ],
       tags: [
         "tag 1",
       ]
     },
     {
       username: 'Username dua',
       userId: 33,
       avatar: 'https://i.pravatar.cc/40',
       post: 'Posting ke dua',
       comments: [],
       tags: [
         "tag 1",
         "tag 2",
       ]
     },
   ]);
   </script>
   

4. Menjalankan npm run dev
   
   
5. Tampilan pada browser
   Tampilan awal:
   
   
   Setelah klik Tampilkan Komentar:
   

Kunjungi www.proweb.co.id untuk menambah wawasan anda.