Method dan Computed pada Vue.js

Vue.js memiliki fitur method dan computed. Method dan computed ini merupakan function dari Javascript. Pada computed ini membentuk properties.

Method dan computed pada Vue.js adalah seperti pada contoh berikut ini

1. Sub komponen komentar
   
2. Method dan computed pada komponen
   
3. Template yang memanggil method dan computed
   
4. Data yang akan ditampilkan
   
5. Ambil data dan berikan ke komponen
   
6. Menjalankan npm run dev
   
   
7. Tampilan pada browser
   Tampilan awal:
   
   
   Tampilkan komentar:
   
8. Source code sub komponen tampilan komentar dengan file molecules/PesanSosialKomentar.vue

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

9. Source code komponen dengan file molecules/PesanSosial.vue

   <template>
     <div
       class="PesanSosial"
       :class="{ PesanSosial__selected: selected }"
       @click="onSelectedClick"
     >
       <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="hasComments"
         @click="onShowCommentClick"
       >Tampilkan Komentar</button>
       <PesanSosialKomentar
         v-if="showComments"
         :comments="comments"
       />
       <div class="interactions">Interactions: {{ interactions }}</div>
     </div>
   </template>
   
   <script setup>
   import { onMounted, ref, computed } from 'vue';
   import PesanSosialKomentar from './PesanSosialKomentar.vue';
   
   const selected = ref(false);
   const onSelectedClick = () => {
     selected.value = !selected.value;
   };
   
   const showComments = ref(false);
   const onShowCommentClick = () => {
     console.log("Tampilkan komentar");
     showComments.value = !showComments.value;
   }
   
   const props = defineProps({
     username: String,
     userId: Number,
     avatarSrc: String,
     post: String,
     comments: Array,
     likes: Number,
     retweets: Number
   });
   const hasComments = computed( () => {
       return props.comments.length > 0;
   })
   
   const interactions = computed( () => {
     const comments = props.comments.length;
     console.log(comments, props.likes, props.retweets);
     return comments + props.likes + props.retweets;
   });
   
   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;
     }
     .interactions {
       font-weight: bold;
       margin-top: 8px;
     }
   }
   </style>
   

10. Source code parent komponen dengan file TheWelcome.vue

    <template>
      <PesanSosial
        :username="posts[0].username"
        :userId="posts[0].userId"
        :avatarSrc="posts[0].avatar"
        :post="posts[0].post"
        :comments="posts[0].comments"
        :likes="posts[0].likes"
        :retweets="posts[0].retweets"
      ></PesanSosial>
    
      <PesanSosial
        :username="posts[1].username"
        :userId="posts[1].userId"
        :avatarSrc="posts[1].avatar"
        :post="posts[1].post"
        :comments="posts[1].comments"
        :likes="posts[0].likes"
        :retweets="posts[0].retweets"
      ></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",
        ],
        likes: 2,
        retweets: 1,
        tags: [
          "tag 1",
        ]
      },
      {
        username: 'Username dua',
        userId: 33,
        avatar: 'https://i.pravatar.cc/40',
        post: 'Posting ke dua',
        comments: [],
        likes: 3,
        retweets: 1,
        tags: [
          "tag 1",
          "tag 2",
        ]
      },
    ]);
    </script>
    

Kunjungi www.proweb.co.id untuk menambah wawasan anda.