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.

 

Penerapan Directive pada Komponen Vue.js
Ada yang dapat saya bantu ?