Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

実装内容

  • テキスト入力欄を1つ設けて数値を入れられるようにする
  • 入力値が0〜9以外の場合に入力欄の横に赤字でエラー文言を表示する
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;
}

解説

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

おわりに

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away