Vueでテキストフォームの値に応じて、ボタンを有効/無効にする

開発環境は、Windows 10 Pro(64bit) + Vue 2.6.12。

現在のテキストフォームの値は、watchを使って監視をします。watchの中に、v-modelで紐づけているdataのオブジェクトのキー名を指定して、そのオブジェクトに変化があれば、watchがそれに応じて変化します。

今回は、簡易的なバリデーションとして、ユーザー名が８文字以上、パスワードが８文字以上であれば、ボタンを有効にするというプログラムを作ってみます。

<template>
  <div>
    <form>
      <input type="text" v-model="username" />
      <input type="password" v-model="password" />
      <input type="button" value="登録" v-bind:disabled=button_flug />
    </form>
  </div>
</template>

<script>
import Vue from 'vue'

export default Vue.extends({
  data: () => ({
    username: '',
    password: '',
    username_flug: false,
    password_flug: false,
    button_flug: false
  }),
  watch: {
    username: function(newValue){
      this.username_flug = newValue.length >= 8 ? true : false
      this.button_flug = this.username_flug && this.password_flug ? true : false 
    },
    password: function(newValue){
      this.password_flug = newValue.length  >= 8 ? true : false
      this.button_flug = this.username_flug && this.password_flug ? true : false 
    }
  }
})
</script>