Halo apa kabar ?.. kali ini saya mau berbagi tentang cara pengambilan data dengan menggunakan axios di Vue JS. Artikel ini adalah lanjutan dari Templating di Vue.js , disini kita akan melanjutkan project yang sudah kita buat sebelumnya. Okey kita mulai aja

• Installasi Axios di project Vue kalian dengan perintah, npm i axios
• Buka halaman Artikel.vue, yang telah kita buat di artikel sebelumnya, dan tambahkan code ini di bawah tag template, code ini digunakan untuk mengambil data dari API yang kalian punya.

<script>
   import { reactive, toRefs, onMounted } from "vue";
   import axios from "axios";

   export default{      
      setup(){
         const data = reactive({
            articles: []
         });

         onMounted(() => {
            axios.get('http://127.0.0.1/lara-core/public/api/list-article')
            .then((result) => {
               data.articles = result.data
               console.log(result.data)
            }).catch((err) => {
               console.log(err.response)
            });
         });
         
         return{
            ...toRefs(data),
         }
      }   
   };
</script>

Note : URL api bisa disesuaikan dengan URL yang kalian mau ya.

• Untuk bagian template juga ada modifikasi banyak , jadi seperti ini

<template>
   <div class="container">
      <div class="wrap-artikel">
         <div class="list-artikel" v-for="(row, index) in articles.data" :key="index">
            <router-link :to="'/detail/' + row.id">
               <div class="artikel">
                  <div class="thumb">
                     <img v-bind:src="'src/assets/images/artikel/' + row.thumb" alt="">
                  </div>
                  <div class="wrap-desc">
                     <div class="kategori">{{ row.category }}</div>
                     <div class="title">{{ row.title }}</div>
                     <span class="auth">{{ row.auth }}</span>
                     <span class="date">{{ row.date }}</span>
                  </div>
               </div>
            </router-link>
         </div>
      </div>
   </div>
</template>

Note :  untuk melooping data kalian bisa menggunakan v-for, dan untuk menampilkan data kalian bisa pakai tanda {{ .... }}

Nah untuk style.css juga ada tambahan ya, seperti dibawah ini, atau kalian bleh berkreasi sendiri ya.

.wrap-artikel {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

.list-artikel {
  width: 50%;
  padding: 0px 15px;
  transition: ease all 0.4s;
}

.list-artikel .artikel {
  width: 100%;
  margin-bottom: 30px;
  border-radius: 8px;
  transition: ease all 0.4s;
  box-shadow: 0px 1px 8px 1px rgba(173,173,173,0.2);
}

.list-artikel .artikel .thumb {
  width: 100%;
  height: 210px;
}

.list-artikel .artikel .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px 8px 0px 0px;
}

.list-artikel .artikel .wrap-desc {
  background-color: #fff;
  border-radius: 0px 0px 8px 8px;
  padding: 15px;
}

.list-artikel .artikel .kategori {
  font-family: "Heebo-Regular",arial,sans-serif;
  font-size: 10px;
  color: #fff;
  margin-bottom: 14px;
  padding: 0px 8px;
  border-radius: 4px;
  background-color: #41b883;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.list-artikel .artikel .title {
  font-family: "Heebo-Bold",arial,sans-serif;
  font-size: 20px;
  color: #252525;
  margin-bottom: 16px;
  line-height: 1.3;
}

.list-artikel .artikel .date, .list-artikel .artikel .auth {
  font-family: "Heebo-Regular",arial,sans-serif;
  font-size: 12px;
  color: #6d6d6d;
}

.list-artikel .artikel .date, .list-artikel .artikel .auth {
  font-family: "Heebo-Regular",arial,sans-serif;
  font-size: 12px;
  color: #6d6d6d;
}

Kira-kira kalau sudah hasilnya seperti dibawah ini

kayanya itu dulu yang bisa saya share, mudah-mudahan bermanfaat.