概要

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

実際のコード

• 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をインストール
• svgはassets配下に格納する
• 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>

• v-model="privacy_protection"の値を親に渡す
  • 子Componentで変更されたv-modelの値を親に反映する を参照
• { name: 'url', params: { url: url } }は名前付きルート
• ボタンもコンポーネントを呼び出してます

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だったら（チェックボックスにチェックが入っていたら）、:disabledをfalseにしたい（送信ボタンを押下できるようにしたい）ので、"isButtonDisabled"にfalseを返す

<script>
export default {
  // 省略
  computed: {
    isButtonDisabled() {
      // 個人情報保護に関して チェック有無の判定
      if (this.privacy_protection === true) {
        return false
      } else {
        return true  // :disabledがtrueの時、ボタンを無効化できる
      }
    }
  },
  //省略
}
</script>