Membuat Dropdown Select Pencarian Dengan Vue Select pada Vue 3

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan vue select pada vue 3. Bagaimana cara membuatnya?, ayo ikuti pembahasannya di bawah ini.

Dropdown search adalah istilah untuk inputan berupa dropdown tapi menggunakan search di dalamnya, dropdown search adalah fitur yang sangat bermanfaat, karena saat saat bekerja dengan banyak data sangat bagus untuk menyertakan form input agar pencarian data yang banyak dapat ditemukan dengan mudah. Dan jika kalian terbiasa bekerja dengan select2, maka vue select adalah penggantinya. 

Cara menggunakan vue select sangat mudah. Pada tutorial kali ini saya akan mencontohkan beberapa penggunaan vue select agar kalian lebih mudah memahami dan mengimplementasikannya ke dalam project yang kalian sedang kerjakan. Untuk melihat hasil akhirnya, silahkan scroll ke bagian paling bawah tulisan ini.

Cara Menggunakan Vue Select pada Vue 3

1. Install vue js versi 3 terlebih ahulu, atau gunakan aplikasi vue js yang sudah siap digunakan. Untuk cara instalasinya bisa kalian ikuti di link berikut ini https://www.sahretech.com/2020/11/cara-install-vue-js-dengan-vue-cli.html

2. Selanjutnya jalankan perintah di bawah ini untuk mengunduh package atau library vue select

npm install vue-select@beta

3. Silahkan buka file main.js, lalu tambahkan script yang belum ada di dalam file dengan script yang ada di bawah ini. Disini kita akan menggunakan vue select secara global.

import {
  createApp
} from 'vue'

import App from './App.vue'

import vSelect from 'vue-select' //import vue-select
import "vue-select/dist/vue-select.css"; //import css vue-select

const app = createApp(App)

app.component('v-select', vSelect) //use secara global

app.use(router)
app.mount('#app')

4. Selanjuntya buka file vue di tempat kalian ingin menggunakan library ini. Berikut ini penggunaan vue select dengan 3 contoh yang berbeda: 1. tanpa data dummy, menggunakan data dummy, dan menggunakan data dari internet.

<template>
  <div class="container">
    <h1 style="text-align: center">Vue Select</h1>
    <p style="text-align: center">Latihan Menggunakan Vue Select di Vue Js</p>

    <h3>1. Tanpa Data Dummy</h3>
    <v-select :options="['Canada', 'United States']"></v-select>
    <br /><br /><br />

    <h3>2. Dengan Data Dummy</h3>
    <v-select :options="country" v-model="country_select"></v-select>
    <br>
    <p>negara yang dipilih adalah {{ country_select }}</p>

    <br /><br /><br />

    <h3>2. Dengan Data Api</h3>
    <v-select
      :options="names"
      :reduce="(label) => label.code"
      label="label"
      v-model="id"
    ></v-select>
    <br>

    <p>data yang dipilih adalah {{ id }}</p>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      country: ["Canada", "United State", "Indonesia", "Singapore"],
      names: [],
      country_select: '',
      id: ''
    };
  },

  mounted() {
    //get data from api
    axios.get("https://jsonplaceholder.typicode.com/users").then((response) => {
      let data = response.data;
      //looping into array
      data.forEach((item) => {
        this.names.push({
          label: item.name,
          code: item.id,
        });
      });

      console.log(this.names);
    });
  },
};
</script>

<style>
</style>

Saat menggunakan axios, jangan lup mendownload librarynya terlebih dahulu. Jika merasa kesulitan cara menggunakan axios kalian bisa mengikuti tutorial vue js saya lainnya atau tanya langsung di kolom komentar.

5. Sekarang kalian bisa melakukan uji coba. Jalankan perintah npm run serve. Lalu lihat hasilnya seperti di bawah ini

Hasil Akhir

Bagaimana susah atau mudah?. Sekarang kalian bisa melakukan improvisasi secara mendiri dengan melengkapi form aplikasi kalian dengan fitur vue select. Sekian tutorial kali ini tentang Membuat Dropdown Select Pencarian Dengan Vue Select pada Vue 3. Semoga bermanfaat, jika ada kesulitan silahkan tanya langsung di kolom komentar atau tanya langsung di fanspage sahretech. Sekian dan terima kasih.