Vue Js İl İlçe Uygulaması

 

Merhabalar bugün VueJs kullanarak bir il ilçe uygulaması yapacağız

GIF Ekran çıktısı - İl İlçe

 

Öncelikle vuejs kütüphanesini dosyamıza ekleyelim

Ve sonra kendimizde bir app.js dosyası oluşturup onuda index.html imize yerleştirelim.

index.html imizde  classı app olan bir div oluşturuyoruz bunun vuejs elementi olduğunu app.js de bildireceğiz.

Bir selectbox atıyoruz içini vuejs ile dolduracağız.

v-model  burada bir il seçildiğinde o ilin id sini alıp ilçelerini getirmek için kullandığımız bir vuejs binding türü.

v-on:change=”ilceleriGetir()”  burada yaptığımız bir il seçildiğinde yani change olduğunda ilceleriGetir() metodunun tetiklenmesi.

Selectin içine oluşturduğumuz option v-for=”list in iller”  ile app.js de içini doldurduğumuz iller değişkenini kullanarak bir for yapısı ile tek tek tüm illeri yazdırıyoruz.

v-bind:value=”list.id” burada yaptığımız olay illerin id sini value kısmına set etmek.

Aynı işlemleri ilçeler içinde yapıyoruz

 

 

app.js  içinde ise

var app =  new Vue({}) ile bir vue nesnesi oluşturuyoruz.el kısmında oluşturulan divin classını yazıyoruz “.” seçicisi ile , name olayı vuejs in chrome eklentisini kurduğunuzda işe yarayan bir olay burada siz kullanmasanızda olur.

data kısmı içerisinde istediğimiz değişkenleri oluşturuyoruz , boş bir iller ilceler array i oluşturuyorum.

methods kısmında oluşturduğum iller arrayını doldurmak için illeriGetir() adında bir fonksiyon yazıyorum burada fetch ile türkiyedeki illeri json olarak veren bir apiye bağlanıyorum.

Gelen sonucu iller arrayimin içine bind ediyorum.

İkinci fonksiyon olan ilceleriGetir() ise il seçildiğinde selectbox da tetiklenecek olan fonksiyon aynı şekilde buradada selected : 0 ile oluşturduğum değişkene v-model=”selected” ile index.html de il idsini atıyordum burada onu çekip onara göre fetch kullanarak hangi ilin ilçelerini getireceğimi belirleyip aynı şekilde gelen datayı ilceler array ime atıyorum. ilSecildi =true burada yaptığım bir il seçilmeden ilçelerin gösterilmemesi bu yüzden data içerisinde bir ilSecildi=false oluşturup bunu index.html’imde v-if ile kontrol ediyorum. Eğer true ise ilçe seçme kısmı gözükecek.

Son olarak ilk sayfa yüklendiğinde illerin gelmesi için oluşturduğum app nesnesinin app.illeriGetir() metodunu çağırarak başlangıçta illerin gelmesini sağlıyorum.

 

Kodların Linki : https://github.com/emrekara37/Vuejs-il-ilce

Bir sonraki makalede görüşmek üzere 🙂

 

2 Cevaplar

  1. Uğur KORKMAZ dedi ki:

    Merhabalar;

    İller ve ilçelerin çekileceği sayfaya erişemiyoruz. JSON dosyası mı bunlar nedir. ? Yardımcı olur musunuz. ?

    Saygılar.

    • emrekara37 dedi ki:

      Merhaba o an açık olan servis şu anda kapalı json olarak il ve ilçeyi veriyorlardı

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.