Form Girdi Bağlantıları

Ön uçta formlarla çalışırken, genellikle form girdi elemanlarının durumlarını ilgili JavaScript durumlarıyla senkronize etmemiz gerekir. Değer bağlamalarını ve değişiklik olay dinleyicilerini elle bağlamak zahmetli olabilir:

<input
  :value="text"
  @input="event => text = event.target.value">

v-model direktifi yukarıdakini basitleştirmemize yardımcı olur:

<input v-model="text">

Ayrıca, v-model farklı türlerdeki girdilerde, ve elemanlarında kullanılabilir. Kullanıldığı eleman bazında farklı DOM özellikleri ve olay çiftlerine otomatik olarak genişler:

Metin türündeki ve elemanları value özelliğini ve input olayını kullanır;
ve checked özelliğini ve change olayını kullanır;
` valueözelliğini prop olarak vechange` olayını kullanır.

::: tip Not v-model, form elemanlarında bulunan başlangıç value, checked veya selected niteliklerini göz ardı edecektir. Her zaman mevcut bağlı JavaScript durumunu doğru kaynak olarak kabul eder. Başlangıç değerini JavaScript tarafında, data seçeneğinireaktivite API'leri kullanarak belirtmelisiniz. :::

Temel Kullanım

Metin

<p>Mesaj: {{ message }}</p>
<input v-model="message" placeholder="beni düzenle" />

Mesaj: {{ message }}

Playground'da deneyin

::: tip Not IME (Girdi Metodu) (Çince, Japonca, Korece vb.) gerektiren dillerde, v-model'in IME bileşimi sırasında güncellenmediğini göreceksiniz. Bu güncellemeleri yanıtlamak istiyorsanız, input olay dinleyicisini ve value bağlamasını kullanarak v-model yerine kendi input olay dinleyicinizi kullanın. :::

Çok Satırlı Metin

<span>Çok satırlı mesaj:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="birden fazla satır ekleyin"></textarea>

Çok satırlı mesaj: {{ multilineText }}

Playground'da deneyin

Not: `içinde ara belleğe alma çalışmaz. Bunun yerinev-model` kullanın.

<!-- kötü -->
<textarea>{{ text }}</textarea>

<!-- iyi -->
<textarea v-model="text"></textarea>

Onay Kutusu

Tek bir onay kutusu, boolean değeri:

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

Playground'da deneyin

Aynı dizi veya Set değerine birden fazla onay kutusunu bağlayabiliriz:

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

<div>Seçilen isimler: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>

Seçilen isimler: {{ checkedNames }}

Jack

John

Mike

Bu durumda, checkedNames dizisi her zaman işaretli kutuların değerlerini içerecektir.

Playground'da deneyin

Radyo

<div>Seçilen: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">Bir</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">İki</label>

Seçilen: {{ picked }}

Bir

İki

Playground'da deneyin

Seçim

Tekli seçim:

<div>Seçilen: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Lütfen birini seçin</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Seçilen: {{ selected }}

Lütfen birini seçin
A
B
C

Playground'da deneyin

Not

Eğer v-model ifadenizin başlangıç değeri herhangi bir seçenekle eşleşmiyorsa, `` elementi "seçilmemiş" durumda render edilecektir. Bu durumda iOS'ta kullanıcı, ilk öğeyi seçemeyecek çünkü iOS bu durumda değişiklik olayı ateşlemez. Bu nedenle, yukarıdaki örnekte gösterildiği gibi, boş bir değere sahip bir devre dışı seçenek sağlamanız önerilir.

Çoklu seçim (diziye bağlı):

<div>Seçilen: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

Seçilen: {{ multiSelected }}

A
B
C

Playground'da deneyin

Seçim seçenekleri v-for ile dinamik olarak render edilebilir:

const selected = ref('A')

const options = ref([
  { text: 'Bir', value: 'A' },
  { text: 'İki', value: 'B' },
  { text: 'Üç', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'Bir', value: 'A' },
        { text: 'İki', value: 'B' },
        { text: 'Üç', value: 'C' }
      ]
    }
  }
}

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Seçilen: {{ selected }}</div>

Playground'da deneyin

Değer Bağlantıları

Radyo, onay kutusu ve seçim seçenekleri için, v-model bağlama değerleri genellikle statik dizgiler (veya onay kutusu için boolean değeri) olur:

<!-- `picked` işaretli olduğunda "a" dizesidir -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` ya true ya da false'dır -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` ilk seçenek seçildiğinde "abc" dizesidir -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Ama bazen değeri aktif örnekteki dinamik bir özelliğe bağlamak isteyebiliriz. Bunu başarmak için v-bind kullanabiliriz. Ayrıca, v-bind kullanmak, giriş değerini dize olmayan değerlere bağlamamıza da izin verir.

Onay Kutusu

<input
  type="checkbox"
  v-model="toggle"
  true-value="evet"
  false-value="hayır" />

true-value ve false-value, yalnızca v-model ile çalışan Vue'ya özel niteliklerdir. Burada toggle özelliğinin değeri onay kutusu işaretlendiğinde 'evet' olarak ayarlanacak, işaretlenmediğinde ise 'hayır' olarak ayarlanacaktır. Ayrıca bunları dinamik değerlere v-bind kullanarak bağlayabilirsiniz:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

::: tip İpucu true-value ve false-value nitelikleri, girişin value niteliğini etkilemez, çünkü tarayıcılar işaretli olmayan kutuları form gönderimlerinde dahil etmez. Formda iki değerden birinin (örneğin "evet" veya "hayır") iletilmesini garanti etmek için radyo girişleri kullanın. :::

Radyo

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick, birinci radyo giriş kutusu işaretlendiğinde first değerine, ikinci radyo giriş kutusu işaretlendiğinde ise second değerine ayarlanacaktır.

Seçim Seçenekleri

<select v-model="selected">
  <!-- satır içi nesne litereali -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model, dize olmayan değerlerin değer bağlamalarını da destekler! Yukarıdaki örnekte, seçenek seçildiğinde, selected { number: 123 } nesne literal değerine ayarlanacaktır.

Modifikatörler

`.lazy`

Varsayılan olarak, v-model girişi her input olayında veriyi senkronize eder (ve IME bileşimi hariç yukarıda belirtilmiştir). Bunun yerine change olaylarından sonra senkronize etmek için lazy modifikatörünü ekleyebilirsiniz:

<!-- "input" yerine "change" ile senkronize edilir -->
<input v-model.lazy="msg" />

`.number`

Kullanıcı girişinin otomatik olarak bir sayıya dönüştürülmesini istiyorsanız, v-model yönetilen girdilerinize number modifikatörünü ekleyebilirsiniz:

<input v-model.number="age" />

Değer parseFloat() ile ayrıştırılamıyorsa, orijinal (dize) değeri kullanılacaktır. Özellikle, giriş boş olduğunda (örneğin kullanıcı giriş alanını temizlediğinde), boş bir dize döner. Bu davranış, DOM özelliği valueAsNumber ile farklıdır.

number modifikatörü, girişin type="number" olması durumunda otomatik olarak uygulanır.

`.trim`

Kullanıcı girişinden boşlukların otomatik olarak kesilmesini istiyorsanız, v-model yönetilen girdilerinize trim modifikatörünü ekleyebilirsiniz:

<input v-model.trim="msg" />

`v-model` Bileşenlerle

Eğer Vue bileşenleriyle henüz tanışmadıysanız, şimdilik bunu atlayabilirsiniz.

HTML'nin yerleşik girdi türleri her zaman ihtiyaçlarınızı karşılamayabilir. Neyse ki, Vue bileşenleri tamamen özelleştirilmiş davranışlarla yeniden kullanılabilir girişler oluşturmanıza olanak tanır. Bu girişler, v-model ile de çalışır! Daha fazla bilgi için, Bileşenler kılavuzunda Kullanım için v-model` bölümüne bakın.