Vue.js untuk Pemula #3 : Mengambil Data dari API

Vue.js adalah framework JavaScript yang populer dan digunakan untuk membangun aplikasi web. Dalam pengembangan aplikasi, seringkali kita membutuhkan data dari server untuk ditampilkan pada halaman web. Dalam hal ini, Vue.js memiliki beberapa cara untuk mengambil data dari server.

Berikut adalah beberapa cara untuk mengambil data di Vue.js:

Menggunakan Axios

Axios adalah library HTTP client yang populer dan bisa digunakan untuk melakukan request data dari server. Axios bisa digunakan dengan mudah dan memiliki berbagai fitur seperti caching, request yang dapat dibatalkan, dan lain-lain. Berikut adalah contoh cara menggunakan Axios untuk mengambil data:

<template>
  <div>
    <ul v-for="item in items">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => (this.items = response.data))
  }
}
</script>

Menggunakan fetch

fetch adalah API built-in yang tersedia pada browser dan bisa digunakan untuk melakukan request data dari server. fetch memiliki beberapa kelebihan seperti mudah digunakan, bisa digunakan pada seluruh browser modern, dan lain-lain. Berikut adalah contoh cara menggunakan fetch untuk mengambil data:

<template>
  <div>
    <ul v-for="item in items">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => {
        this.items = data
      })
  }
}
</script>

Catatan: Dalam kedua contoh di atas, kita mengambil data dari sebuah API yang bisa digunakan untuk testing, yaitu https://jsonplaceholder.typicode.com/posts. Dalam praktiknya, Anda harus menggantinya dengan URL API yang sesuai dengan aplikasi Anda.

Dengan memahami cara-cara di atas, Anda dapat mengambil data dari server dan menampilkannya pada aplikasi Vue.js yang Anda bangun. Dalam beberapa kasus, kita mungkin juga perlu melakukan manipulasi data sebelum menampilkannya pada halaman web. Dalam hal ini, kita dapat menggunakan computed property yang bisa digunakan untuk melakukan proses komputasi dan menghasilkan nilai baru yang akan digunakan pada halaman web.

Berikut adalah contoh cara menggunakan computed property untuk mengambil dan memanipulasi data:

<template>
  <div>
    <ul v-for="item in filteredItems">
      <li>{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  created() {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => (this.items = response.data))
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.id <= 10)
    }
  }
}
</script>

Dalam contoh di atas, kita mengambil data dari server dengan menggunakan Axios dan memfilter data hanya untuk item yang memiliki id kurang dari atau sama dengan 10. Hasil filter ini kemudian dapat digunakan pada halaman web dengan menggunakan filteredItems.

Ini hanyalah beberapa cara untuk mengambil data di Vue.js. Dalam pengembangan aplikasi, Anda mungkin juga perlu menggunakan teknik lain seperti menggunakan Vuex atau Pinia untuk mengelola data aplikasi dan lain-lain. Namun, dengan memahami cara-cara di atas, Anda sudah dapat memulai membangun aplikasi web dengan Vue.js dan mengambil data dari server.

Demo Aplikasi

Untuk demo aplikasinya bisa dicek disini.