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
- 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>
- 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>
- 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>
- Menjalankan npm run dev
- Tampilan pada browser
Tampilan awal:
Setelah klik Tampilkan Komentar:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Penerapan Directive pada Komponen Vue.js