【Vue 2】フォーム入力バインディング
v-model
<input type="text">にデータバインディングすることを考えます。
通常データバインディングにはv-bindを使用します。
これをinputに適用してみます。
<input type="text" :value="val">
<p>{{ val }}</p>data: {
val: 'sample'
}sample
valの値はinputに反映されますが、inputで変更した値はvalに反映されないことがわかります。
inputの値をvalに反映するためには、v-bindの代わりにv-modelを使用します。
<input type="text" v-model="val">
<p>{{ val }}</p>sample
v-modelは双方向バインディングといわれ、フォームの入力値をdataに反映させることができます。
実際は、input イベントをトリガーに値の反映が行われます。
フォームサンプル
text
textは上記の通りなので割愛します。
textarea
<textarea v-model="val"></textarea>
<p>{{ val }}</p>sample
checkbox
checkbox は、単体の場合Booleanのデータをバインドします。
<input type="checkbox" id="checkbox1" v-model="val">
<label for="checkbox1">check</label>
<p>{{ val }}</p>data: {
val: false
}false
複数の場合は、Arrayをバインドすることもできます。
<input type="checkbox" id="checkboxA" value="A" v-model="vals">
<label for="checkboxA">A</label>
<input type="checkbox" id="checkboxB" value="B" v-model="vals">
<label for="checkboxB">B</label>
<input type="checkbox" id="checkboxC" value="C" v-model="vals">
<label for="checkboxC">C</label>
<p>{{ vals }}</p>data: {
vals: ['B']
}[ "B" ]
radio
<input type="radio" id="radioA" name="radio" value="A" v-model="val">
<label for="radioA">A</label>
<input type="radio" id="radioB" name="radio" value="B" v-model="val">
<label for="radioB">B</label>
<p>{{ vals }}</p>data: {
val: 'B'
}B
select
通常の場合は、単体データをバインディングします。
<select v-model="val">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>{{ val }}</p>data: {
val: 'B'
}B
複数選択可の場合は、Arrayをバインディングします。
<select v-model="vals" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>{{ vals }}</p>data: {
vals: ['B']
}[ "B" ]
range
<input type="range" min="0" max="100" v-model="val">
<p>{{ val }}</p>data: {
val: '50'
}50
date
<input type="date" v-model="val">
<p>{{ val }}</p>data: {
val: '2021-04-01'
}2021-04-01
file
<input type="file">ではv-modelは使用できません。
代わりに change イベントを使ってファイルを取得します。
<input type="file" @change="onChange">
<p>{{ filename }}</p>data: {
file: null,
},
computed: {
filename() {
return this.file?.name ?? ''
}
},
methods: {
onChange(event) {
this.file = event.target.files[0]
}
}修飾子
number
numberは、数値に変換できる値の場合はNumberに変換します。
例えば<input type="number">としても、通常設定されるのはStringです。
<input type="number" v-model.number="val">
<p>typeof: {{ valType }}</p>data: {
val: 0
},
computed: {
valType() {
return typeof this.val
}
}number修飾子なし
typeof: number
number修飾子あり
typeof: number
trim
trimは、値の両端の空白を除去した値が設定されるようになります。
<input type="text" v-model.trim="val">
<p>[{{ val }}]</p>data: {
val: ''
}[]
lazy
lazyは、値の反映のタイミングを input イベントから change イベントに変更します。
<input type="text" v-model.lazy="val">
<p>{{ val }}</p>data: {
val: ''
}lazy修飾子なし
lazy修飾子あり
