[Vue.js]算出プロパティとclass属性へのバインディングを使ってバリデーションチェックを実装 #JavaScript

はじめに

薄い内容ですがタイトル通りのことをやってみます。
バリデーションチェックを実装したいというよりも、そのあとの画面表示も含めてやりたいという思い。
通常のWEBアプリケーションであれば、エラー文言を赤字にすることが多いので、そういうスタイルも含めてってことです。
Vue.jsは初心者なので全体像を掴めていない中での実装となります。

実装内容

テキスト入力欄を１つ設けて数値を入れられるようにする
入力値が０〜９以外の場合に入力欄の横に赤字でエラー文言を表示する

index.html

<html>
...

<div id="app">
    <input type="number" v-model.number="num">
    <span v-bind:class="hasErrorClass" v-show="hasError">0〜9の数字を入力してください</span>
</div>

...
</html>

main.js

var vm = new Vue({
    el: '#app',
    data: {
        num: 0,
        hasError: false
    },
    computed: {
        hasErrorClass : function(){
            this.hasError = (this.num < 0 || this.num > 9) ? true : false;
            return {
                hasError: this.hasError
            }
        }
    }
});

style.css

.hasError {
    color: red;
}

解説

プロパティnumはv-modelで双方向バインディングし、入力の都度算出プロパティでチェックできるようにします。
算出プロパティhasErrorClassでは入力値（num）がエラーかどうか判定し、その値で結果としてclass属性を返すようにします。また、エラーがない場合にエラー文言を表示したくないので、その判定(v-show)のためのフラグをプロパティhasErrorに設定しておきます。
html側ではv-bind:class="hasErrorClass"とすることで、判定結果がtrue（エラーあり）ならclass属性付加、false（エラーなし）なら付加無しとなります。
あとは付加されたclass属性に対してスタイル（赤字）を定義するだけです。

おわりに

Vue.jsはまだまだ勉強中なのでこれからも学んだことを１つ１つアウトプットしようかと思います。