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:
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   <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:
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

   <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:
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

   <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.