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.

 

Penerapan Directive pada Komponen Vue.js