Vue.Js v-model Nedir? v-model Kullanımı

V-model, Vue.js ile gelen en özel güzelliklerin başında gelmektedir. <input v-model=”isim” /> yazdığınızda, inputtan gelen veriyi alır, data içerisinde isim property’sini gider günceller. Siz data içersindeki isim değerini değiştirdiğinizde de (fonkstionlar vb. yardımıyla) input içerisindeki veriyi günceller. Buna data-way binding diyoruz ve jQuery ya da pure Javascript bilen birisi için muazzam bir özellik olacaktır.

Eğer daha önceden bir Vue.js projesi oluşturmadıysanız, Vue.Js Nedir? Vue.Js Kurulumu, Nasıl Kurulur? başlıklı yazıya göz atabilirsiniz. Sonrasında da buradaki kodlar üzerinden ilerleyebiliriz.

V-model Directive

V-model directive’i form inout, textarea ve select elementlerinde iki yönlü veri bağlamaları (two-way data binding) oluşturmak için kullanabilirsiniz. V-model directive, kullandığınız input türüne göre öğeyi güncellemenin doğru yolunu otomatik olarak seçer. Biraz büyülü olsa da, v-modeli aslında kullanıcı inputlarından gelen verileri güncellemek için kullanılır.

V-model ve Form Elemanları

V-model, herhangi bir form öğesinde bulunan ve başlangıçta girilmiş olan value, checked veya selected attribute’larını yok sayar. Her zaman Vue instance’tan gelen datayı kaynak olarak ele alır. Yani siz

<select v-model="secilenSehir">
   <option selected value="34">İstanbul</option>
   <option value="6">Ankara</option>
</select>

<script>
....
  data(){
    return {
      secilenSehir: 6
    }
  }
....
</script>

Kodunu kullandığınızda, aslında İstanbul’un seçili olacağını düşünüyorsanız, yanılıyorsunuz. Vue.js sizin neyi default olarak seçtiğinizi önemsemez, kendi bildiğini okur :) Sonuç olarak select içerisinde Ankara seçil olacak görünecektir.

V-model ve Input Text

<input v-model="isim" />
<p>İsminiz: {{ isim }}</p>

<script>
....
  data(){
    return {
      isim: null
    }
  }
....
</script>

Bu kodu çalıştırdığımızda ne olacak? Input’a girdiğiniz değer data içerisindeki isim değerini güncelleyecek ve de ekrana da isminiz: … şeklinde yazılacaktır. Ayrıca,

Pure Javascript vs. Vue.js v-model

Üst kısımda yaptığımızı pure Javascript ile nasıl yapardık?

<input type="text" id="input" onkeyup="myFunction()" />
<p>İsminiz: <span id="isim"></span></p>
<script>
let isim = null
function myFunction(){
	document.getElementById("isim").innerHTML = document.getElementById("input").value;
}
</script>

Şimdiye kadar sizce hangisi daha iyi görünüyor? Birden fazla verinizin olduğunu düşünün, sayfanın her bir köşesinde bir veri var, tek tek onları yakalayıp değiştirmeniz gerekecek. Peki Vue.js’te? Verilerin kaynağı belli, data içerisinde yer alıyor. Gidip oradan basit bir şekilde kontrol edeceğiz.

jQuery vs. Vue.js v-model

Hemen bir yanlış örnek ile başlamaya ne dersiniz? :) Bu yazdığımız Input için çalışma da <select> için çalışacaktır. Neden mi? Çünkü <select> içerisinde bir seçim yaptığımızda select’imiz değişmiş olacak. Ancak, Input içerisinde her yeni karakter ekleme / çıkarma yaptığımızda aslında henüz bir değişiklik olmuyor. Biz başka yere tıkladığımızda o Input’un değeri değişmiş oluyor ve .change() ile de öyle yakalayabiliyoruz. Fakat, bize anlık bir değişim gerekecek.

Tuşlara dokundukça bir şeylerin değişmesi gerekiyordu ancak yazıyı yazıp başka bir yere tıklayınca değişiyor şu anda. O yüzden de bu işimizi görmeyecek, başka ne yapabiliriz?

jQuery .keyup() / .keydown()

jQuery’de .keyup() işimizi görecektir. Fark ettiyseniz, Javascript ile yazarken input’a onkeyup eklemiştik ancak jQuery’de JS dosyası içerisinden bu değişiklikleri anlayabiliyoruz.

Özet olarak Vue.js > jQuery > Pure Javascript :)

v-model – Multiple Select

Multiple select’ler ile birden fazla seçim yapıp bunu data içerisinde tutmaya ne dersiniz?

  <select v-model="sehirler" multiple>
    <option>Ankara</option>
    <option>Balıkesir</option>
    <option>İstanbul</option>
  </select>
  <p>Seçilen Şehirler: {{ sehirler }}</p>

<script>
....
  data: {
    sehirler: null
  }
....
</script>

CTRL tuşuna basılı tutup seçim yaptığınızda birden fazla seçim yapabilirsiniz.

v-model Selected Select

Varsayılan olarak bir değerin seçili olmasını istiyorsak:

v-model Input Radio

Şimdi de radio buttonlarla alakalı bir şeyler yapalım mı? B seçeneğini default olarak seçtik, nasıl mı?

  data: {
    secim: 'b'
  }