v-model で使える修飾子の解説をしていきます。
通常のv-modelは、input 等に設定した場合、データと入力が同期する為、文字を入力中であっても即時に反映されますが、lazy修飾子を追加すると、changeイベントの後に同期するようになる為、入力完了後に反映させることができます。
以下のサンプルで.lazyありなしの挙動の違いが分かるかと思います。
<template>
<div>
<div>{{ name }}</div>
<div>
<label>v-model</label>
<input v-model="name" />
</div>
<div>
<label>v-model.lazy</label>
<input v-model.lazy="name" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "Nobunaga Oda"
};
}
};
</script>
入力された内容を自動的に数値（Number 型）に変換したい場合に.number修飾子を追加します。
実は input 要素にtype="number"を指定しても、返される値は String 型になる為、入力された数値を必ず Number 型にしたい場合は有効になります。
また、.number修飾子が追加された input に数値以外が入力された場合（parseFloat() で解釈できない場合）は、もとの値が返却されるようになっているみたいです。
<template>
<div>
<div>{{ age }}</div>
<div>
<label>v-model.number</label>
<input v-model.number="age" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: 32,
};
}
};
</script>
ユーザが入力した文字から前後の空白、開業を自動的に取り除きたい場合は、.trim修飾子を追加します。
以下サンプルのように、通常のv-modelでは前後に空白、改行を入れると反映されるのに対し、.trim修飾子を付与した方で入力すると取り除かれるのがわかるかと思います。
<template>
<div>
<div>
<label>v-model</label>
<textarea rows="4" v-model="text"></textarea>
</div>
<div>
<label>v-model.trim</label>
<textarea rows="4" v-model.trim="text"></textarea>
</div>
<div>
<pre>{{ text }}</pre>
</div>
</div>
</template>
<script>
export default {
data() {
return {
text: `あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。
`
};
}
};
</script>
あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。