Form Input Bindings

Penggunaan Dasar

Anda bisa menggunakan v-model untuk membuat data binding dua arah di form input, textarea, dan select elements. Hal tersebut secara otomatis akan memilih cara yang tepat untuk memperbarui elemen berdasarkan tipe input. Meskipun agak ajaib, v-model pada dasarnya adalah syntax sugar untuk memperbarui data setiap ada aksi input oleh pengguna, Ditambah perawatan khsusus untuk beberapa edge cases.

v-model akan mengabaikan atribut value, checked atau selected awal yang ditemukan pada elemen form manapun. Hal tersebut akan selalu memperlakukan data Vue Istance sebagai source of truth. Anda harus mendeklarasikan nilai awal pada sisi Javascript, Di dalam opsi data dari komponen Anda.

v-model secara internal menggunakan properti yang berbeda dan melakukan emits pada suatu event yang berbeda untuk elemen input yang berbeda:

• Elemen text dan textarea menggunakan properti value dan aksi input;
• checkboxes dan radiobuttons menggunakan properti checked dan aksi change;
• select fields menggunakan value sebagai prop dan change sebagai sebuah aksi.

Jika Anda memakai bahasa IME (Cina,Jepang,Korea dll), Anda akan melihat bahwa v-model tidak diperbarui selama komposisi IME. Jika Anda ingin melayani pembaruan ini juga, Gunakan aksi input sebagai gantinya.

Teks

<input v-model="pesan" placeholder="edit saya">
<p>Pesan nya adalah : {{ pesan }}</p>

Teks Multiline

<span>Pesan dari Multiline adalah:</span>
<p style="white-space: pre-line;">{{ pesan }}</p>
<br>
<textarea v-model="pesan" placeholder="Tambahkan pesan"></textarea>

Interpolasi pada *textareas* (<textarea>{{text}}</textarea>) tidak akan berfungsi. Sebagai gantinya gunakan v-model .

Checkbox

Checkbox tunggal, Nilai boolean:

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

Checkboxes lebih dari satu, Terikat ke Array yang sama:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checked">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checked">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checked">
  <label for="mike">Mike</label>
  <br>
  <span>Nama yang di centang : {{ checked }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checked: []
  }
})

Radio

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Yang dipilih: {{ picked }}</span>

Select

Select tunggal:

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Yang dipilih : {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

Jika nilai awal pada v-model Anda tidak cocok dengan opsi manapun, maka elemen <select> akan dirender ke dalam state “unselected”. Di iOS, hal ini bisa menyebabkan pengguna tidak dapat memilih item pertama karena iOS tidak melakukan perubahan event. Oleh karena itu, lebih disarankan untuk menyediakan disabled option dengan nilai kosong, Seperti yang ditunjukkan pada contoh diatas.

Select lebih dari satu (terikat ke Array):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Yang dipilih: {{ selected }}</span>

Opsi dinamis dengan v-for:

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

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Binding Nilai

Untuk radio, checkbox dan select options, Nilai binding v-model biasanya berupa string statis ( atau booleans untuk checkbox ):

<!-- `picked` adalah sebuah string "a" ketika dicentang -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` adalah antara true or false -->
<input type="checkbox" v-model="toggle">

<!-- `selected` adalah sebuah string "abc" ketika opsi pertama dipilih -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

Namun terkadang kita mungkin ingin binding nilai ke properti dinamis pada Vue instance. Kita bisa menggunakan v-bind untuk melakukan hal itu. Selain itu, menggunakan v-bind memungkinkan kita untuk binding nilai input ke nilai non-string.

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// ketika dicentang:
vm.toggle === 'yes'
// ketika tidak dicentang:
vm.toggle === 'no'

Atribut true-value dan false-value tidak memengaruhi atribut input value, Karena browser tidak menampilkan kotak yang tidak dicentang (kotak centangan yang kosong) ketika pengisian formulir. Untuk menjamin dan memastikan bahwa salah satu dari dua nilai dikirimkan dalam bentuk (misalnya “Ya” atau “Tidak”), Gunakan radio sebagai gantinya.

Radio

<input type="radio" v-model="pick" v-bind:value="a">

// ketika dicentang:
vm.pick === vm.a

Opsi Select

<select v-model="selected">
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// ketika dipilih:
typeof vm.selected // => 'object'
vm.selected.number // => 123

Modifier

.lazy

Secara default, v-model menyinkronkan input dengan data setelah setiap aksi input (dengan pengecualian komposisi IME seperti dinyatakan di atas). Anda dapat menambahkan lazy modifier sebagai gantinya disinkronkan setelah aksi change:

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" >

.number

Jika Anda ingin input pengguna diketik secara otomatis sebagai angka, Anda dapat menambahkan number modifier ke input yang dieklola oleh v-model Anda:

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

Hal ini seringkali berguna, Karena, bahkan hanya dengan type="number", nilai elemen input HTML selalu dikembalikan dalam bentuk string. Jika nilai tidak dapat diuraikan dengan parseFloat(), maka nilai asli yang akan dikembalikan.

.trim

Jika Anda ingin menyisipkan spasi kosong dari input-an pengguna yang bisa di pangkas secara otomatis, Anda bisa menambahkan trim modifier ke input yang dikelola oleh v-model Anda:

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

v-model dengan Komponen

Jika Anda belum terbiasa dengan komponen Vue, Anda boleh melewati bagian ini.

Jenis input bawaan HTML tidak akan selalu memenuhi kebutuhan Anda. Untungnya, Komponen Vue memungkinkan Anda untuk membuat input yang bisa digunakan kembali dengan perilaku yang sepenuhnya bisa disesuaikan. Input ini bahkan bisa bekerja dengan v-model! Untuk mempelajari lebih lanjut, baca tentang input khsusus di panduan komponen.