v-text-field

典型的なログインページ

code:html

<v-form>

<v-card-text>

<v-text-field

prepend-icon="mdi-account-circle"

label="ユーザーID"

v-model="userId"

/>

<v-text-field

v-bind:type="showPassword ? 'text' : 'password'"

v-bind:append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"

prepend-icon="mdi-lock"

label="パスワード"

v-model="password"

@click:append="showPassword = !showPassword"

/>

<v-btn

block

class="blue white--text"

@click="login"

ログイン

</v-btn>

</v-card-text>

</v-form>

フォームのバリデーションをする

code:html

<v-text-field

prepend-icon="mdi-account-circle"

label="ログインID"

v-model="userId"

/>

バリデーションメソッドを実装する

code:js

methods: {

validateUserId () {

if (this.userId === '') {

return '必須項目です'

}

return true

},

}

これで一応バリデーションは実装できるのだが、これだけでは微妙な時がある。

Submit ボタンを押した時にこのバリデーションが走らない

ということで、

submit のメソッドでバリデーションをする

code:html

<v-form ref="loginForm">

submit ボタンがこうなっていたとして

code:html

<v-btn

block

@click="login"

メソッドでこうする

code:js

methods: {

login () {

// フォームのバリデーションをする

if (!this.$refs.loginForm.validate()) {

return

}

// 以下、ログイン処理を実行

}

}