VUE.JS

Vue.js Form İşlemleri

Yayın:
Vue.js v-model direktifiyle ilgili, ilgili yazı içerisinde form input işlemlerine değinmiş ve kısa bir kaç örnekle açıklamaya çalışmıştım. Bu yazıda konuyu biraz daha genişletmek istiyorum. ...
GÖRSEL
Vue.js v-model direktifiyle ilgili, ilgili yazı içerisinde form input işlemlerine değinmiş ve kısa bir kaç örnekle açıklamaya çalışmıştım. 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>
var app = new Vue({
        el: "#app",
        data: {
          message: ""
        }
      });

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>
var app = new Vue({
        el: "#app",
        data: {
          checked: true
        }
      });
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>
var app = new Vue({
        el: "#app",
        data: {
          checkedNames: []
        }
      });
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>
var app = new Vue({
        el: "#app",
        data: {
          selected: []
        }
      });
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>
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" }
          ]
        }
      });

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.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.