vee-validateで個別にエラーを表示させる

概要

複数のフォームそれぞれで個別にVeeValidateのバリデーションをかけたい時の対応

実装方法

scopeを使います

• それぞれのフォームをformタグで囲って、:data-vv-scope属性を付与する。
  （formタグで囲まないと動作しなかった）

• validateAll({scope名})を実行

src/pages/test.vue

<template>
  <div>
    <form :data-vv-scope="form1">
      <input
        type="text"
        v-model="email"
        name="email"
        v-validate.disable="'required|email'"
        :class="{ 'has-error': errors.has('form1.email') }"
        data-vv-as="メールアドレス"
      />
      <p v-show="errors.has('form1.email')" class="error-message">
        {{ errors.first('form1.email') }}
      </p>
      <button type="button" @click="post('form1')">submit</button>
    </form>

    <form :data-vv-scope="form2">
      <input
        type="text"
        v-model="address"
        name="address"
        v-validate.disable="'required'"
        :class="{ 'has-error': errors.has('form2.address') }"
        data-vv-as="住所"
      />
      <p v-show="errors.has('form2.address')" class="error-message">
        {{ errors.first('form2.address') }}
      </p>
      <button type="button" @click="post('form2')">submit</button>
    </form>
  </div>
</template>

<script>
export default {
  methods: {
    async post(scope) {
      const validateResult = await this.$validator.validateAll(scope);
      if (!validateResult) {
        console.log('Validation error.');
        return false;
      }
      console.log('Success.');
      return true;
    },
  },
}; 

errorsの内容も{scope名}.{name}になるので注意

参考