前回に続いて、とほほのWWW入門さんの流れに沿って試していきます。
Vue.js入門 – とほほのWWW入門
https://www.tohoho-web.com/ex/vuejs.html
バリデーションをしてみる
いきなり実用的ですね。
早速作っていきます。
idを付与したdivの中にテキストフォームを設置
<div id=”form_area”>
<input type=”text”>
</div>
面白いなあと思うのは、外側のdivにidを付与しているところ。後々で書いていきます。
inputにv-modelを付与
はて、v-modelとは？
v-model は、input, select, textarea に対して使用し、Vue オブジェクトのデータと、フォーム部品の値を関係づけます。
https://www.tohoho-web.com/ex/vuejs.html
つまり、フォームの部品を、Vue.jsで操作するというマーキングみたいな感じでしょうか？
<input type=”text” v-model=”message2″>
エラーメッセージを設置
inputの下、div内にエラーメッセージを設置します。
未入力の場合と、6文字以上の時の2つを設置します。
<p class=”error”>必須項目です。</p>
<p class=”error”>5文字以内で入力してください。</p>
エラーメッセージに条件を設定
v-if=”error.xxxx”という条件を設置します。
<p class=”error” v-if=”error.required”>必須項目です。</p>
<p class=”error” v-if=”error.overtxt”>5文字以内で入力してください。</p>
v-ifで、if分岐によって出す出さないを制御できるそうです。
v-if は、値の真偽により描画する・しないを制御します。
https://www.tohoho-web.com/ex/vuejs.html
ちなみに、ここまで書いてブラウザで見てみても、js側を記載していないとv-ifは働かないので両方見えます。
これまでの記載をまとめてみると
<div id=”form_area”>
<input type=”text” v-model=”message2″>
<p class=”error” v-if=”error.required”>必須項目です。</p>
<p class=”error” v-if=”error.overtxt”>5文字以内で入力してください。</p>
</div>
javascriptを記載する
htmlの必要部品と必要なタグを設置したのでjs側です。
<script>
var app2=new Vue({
el:’#form_area’,
watch:{
message2:function(newVal,oldVal){
this.error.required=(newVal.length<1)?true:false;
this.error.overtxt=(newVal.length>5)?true:false;
}
},
data:{
message2:”,
error:{
required:false,
overtxt:false
}
}
});
</script>
Vue.jsの記述を上から見てみる
ほぼコピペで記載していますが、やっていることを日本語にしています。
1:var app2=new Vue({
→app2ということをvue.jsでやりますよという宣言
2:el:’#form_area’,
→id=form_areaという要素に対しての定義ですよ
3:watch:{
→watch は、データの変動を監視する
4:message2:function(newVal,oldVal){
→watchによってmessage2という要素のデータの変動を監視するよ
5:this.error.required=(newVal.length<1)?true:false;
→if文。this=form_area内の、v-if=error.requiredにおいて、message2の値が1文字未満か否かでtrueかfalseを返す
9:data:{
→初期値の定義？
これを書かないとエラーになった。dataを記載するのはwatchの前でも後でもいい
こんな感じかなあ。
深堀はまた別途！