Vue.js , , , , ,

Vue.js ile Gelişmiş Select Deneyimi: vue-select Kullanımı

Vue.js ile form bileşenleri oluştururken native <select> öğesinin yetersiz kaldığı birçok senaryo ile karşılaşıyoruz. Arama yapılabilen dropdownlar, birden fazla seçenek seçilebilen listeler ya da async veri kaynaklarına bağlanan select kutuları derken işler karmaşık hale gelebiliyor. İşte tam bu noktada vue-select hayat kurtarıyor.

Bu yazıda, vue-select bileşeninin temel kullanımını değil, biraz daha gelişmiş özelliklerini konuşacağız. Eğer zaten Vue.js ile haşır neşirsen ve klasik <select>‘ten fazlasına ihtiyacın varsa, doğru yerdesin.

vue-select Nedir?

vue-select Vue.js için oldukça esnek, erişilebilir ve kolay özelleştirilebilen bir select bileşenidir. v-model desteği, async seçenek yükleme, slotlarla içerik özelleştirme ve çoklu seçim gibi birçok özelliği kutudan çıkar çıkmaz sunar.

Kurulumu oldukça basit:

npm install vue-select

veya

yarn add vue-select

Ardından komponentini projenize dahil edebilirsiniz:

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

export default {
  components: { vSelect }
}

Temel Kullanım

<template>
  <v-select :options="['Laravel', 'Vue.js', 'Nuxt', 'Inertia']" v-model="selected" />
</template>

<script setup>
import { ref } from 'vue'
const selected = ref(null)
</script>

Bu kadarı zaten dokümantasyonda var. Peki ya gerçek dünya kullanım senaryoları?

1. Label ve Value Ayrımı

Backend’den gelen verilerde genellikle id ve name yapısı olur. vue-select, label ve value’yi ayırmak için oldukça pratik:

<v-select
  :options="categories"
  label="name"
  :reduce="category => category.id"
  v-model="selectedCategory"
/>

Bu kullanım sayesinde v-model, doğrudan id değerini taşır. Bu da form post işlemlerinde işleri epey kolaylaştırır.

2. Async Arama (Debounced API Çağrısı)

Veriler çoksa hepsini frontend’e yığmak performans açısından sorun olabilir. İşte @search eventi burada devreye giriyor:

<v-select
  v-model="selectedUser"
  :filterable="false"
  label="name"
  :options="users"
  @search="onSearch"
/>
const users = ref([])
const onSearch = debounce((search, loading) => {
  loading(true)
  axios.get('/api/users', { params: { q: search } })
    .then(({ data }) => users.value = data)
    .finally(() => loading(false))
}, 500)

Not: lodash.debounce veya kendi debounce fonksiyonunuzu kullanabilirsiniz. Böylece API’ye yüklenmezsiniz.

3. Multi-Select Kullanımı

Birden fazla seçim gerekiyorsa multiple özelliğini kullanmanız yeterli:

<v-select
  v-model="selectedTags"
  :options="tagList"
  label="title"
  multiple
  :close-on-select="false"
/>

close-on-select özelliğini false yaparak her seçim sonrası dropdown’ın kapanmasını engelleyebilirsiniz.

4. Custom Option Rendering (Slot Kullanımı)

Bazen bir option’ı sadece adıyla değil, bir ikonla veya ilave bilgiyle göstermek isteyebilirsiniz.

<v-select
  :options="users"
  label="name"
  v-model="selectedUser"
>
  <template #option="{ name, email }">
    <div class="flex flex-col">
      <span>{{ name }}</span>
      <small class="text-gray-500 text-xs">{{ email }}</small>
    </div>
  </template>
</v-select>

Aynı mantıkla selected-option slot’u ile seçilen öğeyi de özelleştirebilirsiniz.

5. create-option ile Dinamik Seçenek Ekleme

Formlara esneklik kazandırmak isterseniz kullanıcıya yeni seçenek oluşturma imkanı da verebilirsiniz:

<v-select
  v-model="selectedTags"
  :options="tagList"
  taggable
  @new-option="addNewTag"
/>
function addNewTag(newTag) {
  const tag = { id: Date.now(), title: newTag }
  tagList.value.push(tag)
  selectedTags.value.push(tag)
}

Küçük Ama Önemli Notlar

  • vue-select, SSR uyumlu değildir. Nuxt kullanıyorsanız sadece client tarafında render edin.
  • Performans açısından çok büyük listeler için virtual scrolling özelliği yok. Alternatif bileşenler (örneğin: vue-multiselect, vue-treeselect) bu konuda daha başarılı olabilir.
  • scoped slots ve custom class kullanımı ile görsel anlamda oldukça özelleştirilebilir.

Sonuç

Karmaşık formlarda kullanıcı deneyimini artırmak istiyorsanız vue-select oldukça güçlü ve sade bir araç. Özellikle label-value ayrımı, async veri çekme ve çoklu seçim gibi özelliklerle native <select>’e göre çok daha fazla kontrol sunuyor.

İster basit bir dropdown, ister REST API ile entegre çalışan gelişmiş bir autocomplete arıyorsanız vue-select işinizi görecektir.

Vue dünyasında daha fazla içerik için takipte kalın! 🧑‍💻

Share this content:

Etiket