Vue.jsのWatchを用いてformの値を数字以外の場合にリアルタイムで拒否する
3626 ワード
Vue.jsでフォームに入力する値を数字以外の場合に拒否する機能を実装する機会があったのでその時の知見を共有したいと思います。
Watchと正規表現を用いた
言わずと知れた監視プロパティですが、Vue.jsの公式ではcoumputedプロパティの方を推奨しているようです。いろいろないろいろな兼ね合い(私の実力不足)によって今回はwatchプロパティを用いて実装しました。
今回は入力したものが正規表現にマッチしないかどうか判断し、マッチするようであれば入力された値をそのまま返し、マッチしないようであればsliceを用いて最後尾の文字を除外した文字列を返すというロジックにしました。
<template>
<div>
<input type="text" v-model="value" value="">
</div>
</template>
<script>
import LikeHeader from './components/LikeHeader'
export default {
components: {LikeHeader},
data() {
return {
value: '',
}
},
watch: {
value(val) {
let check = /^([1-9]\d*|0)$/ //正規表現の定義
if (check.test(val)) { //testメソッドで入力された値が正規表現に一致するかチェック
this.value = val //マッチした時はそのままreturn
} else {
this.value = val.slice(0,-1) //マッチしない場合は最後尾の文字列を除いた値をreturn
}
}
},
}
</script>
ありがとうございました。
次はcomputedプロパティでも実装できるか試します。
もっといいやりかたがあったら知りたいです。。。
Author And Source
この問題について(Vue.jsのWatchを用いてformの値を数字以外の場合にリアルタイムで拒否する), 我々は、より多くの情報をここで見つけました https://qiita.com/ki_shi_0922/items/c3a7d3e714d6c9d77a07著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .