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:
12345678910111213141516171819<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:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<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:
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<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,
post:
'Posting ke satu'
,
comments:[
"Postingan bagus"
,
"Sangat menakjubkan"
,
],
tags: [
"tag 1"
,
]
},
{
username:
'Username dua'
,
userId: 33,
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