久々にnuxt入門した #06 - もがき系プログラマの日常

はじめに

こんばんは。

今回も前回の続きです。

kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com kojirooooocks.hatenablog.com

今回は、vee-validateを導入して入力フォームのバリデーションを行いました。

logaretm.github.io

本題

まず vue-js-modal をインストールします。

$ npm install vee-validate --save

plugins/vee-validate.js

vee-validateの設定ファイル作成します。

import { localize, extend } from 'vee-validate'
import { required, max } from 'vee-validate/dist/rules'
import ja from 'vee-validate/dist/locale/ja.json'
localize('ja', ja)

extend('required', {
  ...required,
  message: '未入力になっています。'
})

extend('max', {
  ...max,
  message: '{length}文字以内で入力してください。'
})

nuxt-config.js

pluginを読み込みます

...
  plugins: [
    { src: '~/plugins/vue-js-modal.js' },
    { src: '~/plugins/vee-validate.js' }
  ],
...

また、buildの transpile で指定する必要があります。

...
build: {
   transpile: ['vee-validate/dist/rules'],
}
...

AddCard.vue

カードの追加時のバリデーションを実装しました。

<template>
  <div class="px-2 mb-2">
    <p
      v-show="!isPushedAddCardButton"
      class="cursor-pointer"
      @click="isPushedAddCardButton = true"
    >
      ＋ カードを追加
    </p>
    <div v-show="isPushedAddCardButton" class="mt-6">
      <ValidationObserver ref="obs" v-slot="{ reset, valid }">
        <ValidationProvider v-slot="{ errors }" rules="required|max:10">
          <input v-model="addCardTitle" class="w-full p-3 border-2" />
          <ul>
            <li v-for="(error, k) in errors" :key="k" class="text-red-500">
              {{ error }}
            </li>
          </ul>

          <div class="mt-2">
            <button
              class="bg-blue-400 text-white font-bold py-2 px-4 rounded"
              :class="{
                'hover:bg-blue-700 ': valid,
                'bg-blue-500 ': valid,
                'cursor-not-allowed': !valid
              }"
              :disabled="!valid"
              @click="onClickAddButton(reset)"
            >
              追加
            </button>
            <button
              class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
              @click="onClickCloseButton(reset)"
            >
              閉じる
            </button>
          </div>
        </ValidationProvider>
      </ValidationObserver>
    </div>
  </div>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate'
export default {
  name: 'AddCard',
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      addCardTitle: '',
      isPushedAddCardButton: false
    }
  },
  methods: {
    onClickAddButton(validateReset) {
      validateReset()
      this.$emit('onAddCard', this.addCardTitle)
      this.addCardTitle = ''
      this.isPushedAddCardButton = false
    },
    onClickCloseButton(validateReset) {
      validateReset()
      this.addCardTitle = ''
      this.isPushedAddCardButton = false
    }
  }
}
</script>

<style scoped></style>