Tutorial Vue.js: Menghubungkan API dan Menampilkan Data

Vue.js bukan hanya bisa digunakan untuk membuat antarmuka sederhana, tetapi juga sangat berguna dalam menghubungkan aplikasi dengan data dari API eksternal. Dengan menggunakan API, aplikasi bisa menampilkan informasi real-time seperti cuaca, berita, kurs mata uang, atau data lain yang selalu diperbarui. 🚀 Artikel ini akan membahas langkah-langkah praktis bagaimana cara menghubungkan Vue.js dengan API dan menampilkan datanya di aplikasi.

Persiapan Dasar

Struktur HTML

 <div id="app"> <h1>Daftar Post dari API</h1> <button @click="fetchData">Ambil Data</button> <ul> <li v-for="post in posts" :key="post.id"> <b>{{ post.title }}</b> - {{ post.body }} </li> </ul> </div> 

Membuat Script Vue.js

Kode Dasar

 new Vue({ el: '#app', data: { posts: [] }, methods: { async fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const data = await response.json(); this.posts = data.slice(0, 5); // tampilkan 5 data pertama } catch (error) { console.error('Gagal mengambil data:', error); } } } }); 

Penjelasan Kode

Bagaimana Cara Kerjanya?

• 📌 fetchData() → method untuk mengambil data dari API menggunakan fetch().
• 📌 this.posts → menyimpan data hasil request ke dalam array.
• 📌 v-for → digunakan untuk menampilkan daftar data dalam bentuk list.
• 📌 slice(0,5) → hanya mengambil 5 data pertama agar lebih ringkas.

Hasil yang Diharapkan

Setelah dijalankan

Saat tombol "Ambil Data" diklik, aplikasi akan memanggil API dari JSONPlaceholder dan menampilkan daftar post berupa judul dan isi. 🎉

Pengembangan Lebih Lanjut

Ide Fitur Tambahan

• ✅ Tambahkan fitur pencarian untuk memfilter data.
• ✅ Gunakan axios sebagai alternatif fetch() untuk pengelolaan request lebih mudah.
• ✅ Tampilkan data dengan desain tabel menggunakan CSS atau Tailwind.
• ✅ Tambahkan loader ⏳ saat data sedang diambil dari API.

Kesimpulan

Menghubungkan Vue.js dengan API eksternal sangatlah mudah. Dengan beberapa baris kode, aplikasi web sudah bisa menampilkan data real-time yang dinamis. 🔥 Langkah ini merupakan dasar penting dalam membangun aplikasi modern seperti dashboard, marketplace, atau aplikasi berita. Dengan menguasai konsep ini, kamu sudah selangkah lebih dekat untuk menjadi developer Vue.js yang andal.

Bagikan Artikel ini