今回のゴール
- Vue.jsで実装するinputフォームで入力できる文字数を制限し、特定の文字数以上は入力できないようにする
実際のコード
サンプル
CodeSandboxに実際に動くもの作りました。
https://codesandbox.io/s/input-form-chara-limit-o9qp1?fontsize=14&hidenavigation=1&theme=dark
<template>
<div id="app">
<p>5文字以上入力ができないinputフォーム</p>
<input type="text" v-model="inputText">
<p>{{ inputText }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputText: ""
};
},
watch: {
inputText(inputText) {
this.inputText = this.charaLimit(inputText);
}
},
methods: {
charaLimit(inputText) {
return inputText.length > 5 ? inputText.slice(0, -1) : inputText;
}
}
};
</script>
watchによってv-modelで文字列inputTextが新しく入力された時に、methodのcharaLimitが動くようにします。
cahraLimmitではinputTextが5文字より多い場合は文字列の末尾を削除し、そうでなければ入力された文字列をそのまま
returnしてinputTextに代入するようにします。
inputTextが入力される度に文字列の末尾を削除するので実質的に、文字列が5文字より多い場合はinputTextに値が入らなくなります。
所感
入力された文字のバリデーションは正規表現に任して、入力文字数はsliceで対応すると簡単でした。