Vue select in nested data

July 11, 2019 • ☕️ 1 min read

Sulit jika data dropdown kita sudah ratusan hingga ribuan ga mungkin dong kita scroll satu persatu untuk mendapatkan data yang kita mau, salah satu solusinya search filter menggunakan select2. Tapi bagaimana mengimplementasikan di VueJS terlebih jika state kita nested, saya sendiri sudah mencoba beberapa package namun akhirnya jatuh pilihan ke vue-select.

Install

$ npm install vue-select

<template>
    <div class="col-md-6" :class="{ 'has-danger': errors.product_id }">
    <label>Products</label>

    // reduce bertugas memasukkan properti id ke dalam v-model
    // jika tidak menggunakan reduce, yg akan ke bind ke dalam
    // v-model adalah object dari products. karna kita hanya ingin
    // properti id saja yg terbind ke dalam form.product
    <v-select
        v-model="form.product"
        :options="products"
        :reduce="product => product.id" 
    />
    <div
        class="form-control-feedback"
        v-if="errors.product_id"
    >{{ errors.product_id[0] }}</div>
    </div>
</template>

<script>
import "vue-select/dist/vue-select.css";
import vSelect from "vue-select";

export default {
  components: {
    vSelect
  },
  data() {
    return {
      form: {
        product: "",
      },
      products: [],
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    async fetchProducts() {
      const response = await axios.get('some_endpoint);
      const result = await response.data;

      result.map(res => {
        this.products.push({
          id: res.id,
          label: res.name
        });
      });
    },
  }
};
</script>