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

【Nuxt.js】チェックボックスにチェックがある場合のみ送信可能なバリデーションの実装

概要

  • 個人情報保護に関する項目を確認し、チェックボックスにチェックが入っていれば送信ボタンを押せるようにしたい
  • もし、チェックボックスにチェックが入っていなければ、ボタンを無効化(disabled)したい
  • チェックボックスは標準のものではなく、独自で用意したsvgを使用したい
    • input typecheckboxの時の値を取得したい

実際のコード

  • v-ifディレクティブを使用してチェックが入っているか否かの判定をする
components/PrivacyProtection.vue
<template>
  <form name="form">
    <label for="checkbox">
      <input
        type="checkbox"
        name="checkbox"
        id="checkbox"
        v-model="privacy_protection"
        v-on:change="onChange"
      />
      <CheckOutSvg v-if="checkFlag" />
      <CheckInSvg v-else />
      <a href="/" class="link">
        個人情報保護に関して
      </a>
      に同意する(必須)
    </label>
  </form>
</template>
  • svgを使用するためnuxt-svg-loaderをインストール
  • svgassets配下に格納する
  • svgを以下のようにimportする
<script>
import CheckOutSvg from "@/assets/check_out.svg"
import CheckInSvg from "@/assets/check_in.svg"

export default {
  components: {
    CheckOutSvg,
    CheckInSvg,
  },
  //省略
}
</script>
  • checkFlagの初期値を設定
  • 初期値はCheckOutSvg(チェックが外れたavg)を表示したいので、trueを返す
<script>
  //省略
  data() {
    return {
      checkFlag: true
    }
  },
  // 省略
</script>
  • document.form.checkbox.checkedでチェックボックスの値を取得する
  • 得た値がcheckedだったらCheckInSvgを表示
<script>
  //省略
  methods: {
    onChange() {
      if (document.form.checkbox.checked) {
        this.checkFlag = false  // CheckInSvgが表示される
      } else {
        this.checkFlag = true  // CheckOutSvgが表示される
      }
    }
  },
  // 省略
</script>
  • 今回はsvgを使用したので、チェックボックスの標準スタイルは非表示にしておく
<style>
input[type="checkbox"] {
  display: none;
}
</style>
index.vue
<template>
  <section>
    <PrivacyProtection v-model="privacy_protection" />
    <div class="btn">
      <nuxt-link :to="{ name: 'url', params: { url: url } }">
        <Btn
          :text="btn"
          @click.native="submit"
          :disabled="isButtonDisabled"
        ></Btn>
      </nuxt-link>
    </div>
  </section>
</template>
  • v-model="privacy_protection"の値がtrueだったら(チェックボックスにチェックが入っていたら)、:disabledfalseにしたい(送信ボタンを押下できるようにしたい)ので、"isButtonDisabled"にfalseを返す
<script>
export default {
  // 省略
  computed: {
    isButtonDisabled() {
      // 個人情報保護に関して チェック有無の判定
      if (this.privacy_protection === true) {
        return false
      } else {
        return true  // :disabledがtrueの時、ボタンを無効化できる
      }
    }
  },
  //省略
}
</script>
katu_
学習記録のためにQiita始めました
Why not register and get more from Qiita?
  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