Vue.js Form İşlemleri

Bu yazıda konuyu biraz daha genişletmek istiyorum. Bildiğimiz üzere v-model direktifi ile two-way data binding şeklinde ifade edilen, bir form elemanı (input, textarea, select, checkbox, radio) ile bir ögenin ilişkilendirilmesi form elemanının tipine bağlı olarak oldukça kolay bir şekilde sağlanabilmekte. Elbette, farklı form elemanlarına göre farklı özellikler ve olaylar söz konusu. Kısaca özetleyelim:

• Input text ve textarea value property ve input event kullanır. Unutmadan, textarea içerisinde interpolation kullanamayız.
• Checkbox ve radio butonları checked property ve change event kullanır.
• Select ise value property ve event olarak change kullanır.

Örneklerle ilerleyelim.

<div id="app">
  <div v-cloak>
    <input v-model="message" placeholder="Write something..." />
    <transition name="fade">
      <p v-show="message">
        Message is: <strong>{{ message }}</strong>
      </p>
    </transition>
  </div>
</div>

// Vue v2.x
const app = new Vue({
  el: "#app",
  data: {
    message: ""
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      message: ""
    }
  }
}).mound('#app');

Yukarıdaki örnekte yer alan transition bir wrapper component. Göz aşinalığı olması amacıyla örneğe ekledim. Bizim için önemli olan v-model="message" tanımlı input ve p etiketi içerisinde yer alan message ifadesi. app.message içeriğimiz ön tanımlı olarak boş ve v-show direktifi ile içeriğin boş olmaması durumunda gösterilmesini sağlıyoruz. Input içeriğine bir ifade girdiğinizde ilgili alan ekranda gösterilmekte ve yazılan p etiketleri içerisinde sunulmakta. Bu sayede input event ile value prop değiştirmiş olmaktayız.

Yukarıdaki örnek input ve textarea kullanımları için benzerlik göstermekte. Gelelim, bir diğer örnek olarak radio kullanımına.

<input type="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

// Vue v2.x
var app = new Vue({
  el: "#app",
  data: {
    checked: true
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      checked: true
    }
  }
}).mound('#app');

Bu işlemi bir de çoklu seçeneğin söz konusu olduğu bir kullanım için gerçekleştirelim:

<input type="checkbox" id="andromeda" value="Andromeda" v-model="checkedNames" />
<label for="andromeda">Andromeda</label>
<input type="checkbox" id="black-eye-galaxy" value="Black Eye Galaxy" v-model="checkedNames" />
<label for="black-eye-galaxy">Black Eye Galaxy</label>

// Vue v2.x
var app = new Vue({
  el: "#app",
  data: {
    checkedNames: []
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mound('#app');

v-model="checkedNames" ile ilişkili olarak checkedNames: [] checkbox ile gerçekleştirdiğimiz her seçimde (checked prop) change event sayesinde değer olarak alacaktır. Select örneğine (multiple) geçelim.

<select v-model="selected" multiple>
  <option>Andromeda</option>
  <option>Black Eye Galaxy</option>
  <option>Bode's Galaxy</option>
</select>
<br />
<span>Selected: {{ selected }}</span>

// Vue v2.x
var app = new Vue({
  el: "#app",
  data: {
    selected: []
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      selected: []
    }
  }
}).mound('#app');

Peki, bu işlemi dinamik olarak gerçekleştirmek istersek?

<select v-model="dynamicSelected">
  <option disabled value="">Please select one</option>
  <option
    v-for="option in dynamicOptions"
    v-bind:value="option.id + ': ' + option.value"
  >
  {{ option.text }}
  </option>
</select>
<span>{{ dynamicSelected }}</span>

// Vue v2.x
var app = new Vue({
  el: "#app",
  data: {
    dynamicSelected: "",
    dynamicOptions: [
      { text: "Andromeda", id: "A", value: "Andromeda Galaxy" },
      { text: "Black Eye Galaxy", id: "B", value: "Black Eye Galaxy" },
      { text: "Bode's Galaxy", id: "C", value: "Bode's Galaxy" }
    ]
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      dynamicSelected: "",
      dynamicOptions: [
        { text: "Andromeda", id: "A", value: "Andromeda Galaxy" },
        { text: "Black Eye Galaxy", id: "B", value: "Black Eye Galaxy" },
        { text: "Bode's Galaxy", id: "C", value: "Bode's Galaxy" }
      ]
    }
  }
}).mound('#app');

Evet, örneklerimiz bu kadar. Örnek uygulamalarda konuyu pek çok şekilde ele alağım. Yukarıdaki örneklere ait kodlar için GitLab > Vue Examples içeriğine göz atabilirsiniz.

Sonuç Olarak

Vue, form işlemleri için oldukça pratik özellikler sunmakta. Yazı içeriğinde bahsetmediğim Value Bindings ve v-model direktifi altında değindiğim Modifiers bunlardan bazıları. Detaylar için ilgili yazıları ve Vue.js kaynakçasını inceleyebilirsiniz.