vee-validateで同意用のチェックボックスを作る

よくある利用規約とかの必須なチェックボックスをvee-validateで書くとこんな感じになる

<template lang="pug">
  div
      validation-provider(rules='required|email' v-slot="{valid, errors}" name='メールアドレス')
        b-form-group(label='メールアドレス')
          b-form-input(type='email' name='email' v-model='email' :state='errors[0] ? false : (valid ? true : null)' required)
          b-form-invalid-feedback {{errors[0]}}
      validation-provider(rules='required' v-slot="{valid, errors}" name='パスワード')
        b-form-group(label='パスワード')
          b-form-input(type='password' name='password' v-model='password' :state='errors[0] ? false : (valid ? true : null)' required)
          b-form-invalid-feedback {{errors[0]}}
      validation-provider(rules='required' v-slot="{valid, errors}" name='規約に同意')
        b-form-group
          b-form-checkbox(v-model='form.accepted' value='accepted' unchecked-value='' name='agreement' v-validate="'required'")
            a(href='/term' target='_blank') 利用規約
            |・
            a(href='/policy' target='_blank') プライバシーポリシー
            |に同意する
          b-form-invalid-feedback {{errors[0]}}
      .mt-3
        b-button.btn-block(type='submit' variant='brown' :disabled='invalid' @submit.prevent='onSubmit()') 登録する
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import { ValidationProvider, ValidationObserver } from 'vee-validate'

@Component({
  components: { ValidationProvider, ValidationObserver }
})
class FormSignUp extends Vue {
  @Prop()
  private onSubmitted!: () => {}
  private isSubmitting = false
  private form: {
    email: string
    password: string
    accepted: boolean
  } = {
    email: '',
    password: '',
    accepted: false
  }

  '$refs': {
    observer: any
  }

  private async onSubmit() {
    if (this.isSubmitting) {
      return
    }
    this.isSubmitting = true
    const isValid = await this.$refs.observer.validate()
    if (isValid) {
      // 登録処理
    } else {
      this.isSubmitting = false
    }
  }
}
export default FormSignUp
</script>

普通に required使うだけだったという話