Vuelidate-apicase-connect example

example.vue

<template>
  <form @submit.prevent="$form('testForm').submit('hello')">
    <h2> Vuelidate-forms + Vue-Apicase demo</h2>
    <label> My name is </label>
    <input
      type="text"
      v-model="test.name"
      @input="$v.test.name.$touch"
      :class="{ invalid: $v.test.name.$invalid && $v.test.name.$dirty }"
      placeholder="Enter your name"
    >
    <div class="text-grey" v-if="apis.hello.pending"> Wait please</div>
    <button v-else> Enter </button>
  </form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  forms: {
    test: {
      name: {
        required,
        $value: 'Noname'
      }
    }
  },
  api: {
    hello: {
      hooks: {
        // Successful submit
        success (ctx) {
          console.log(`Hello, ${ctx.query.name}!`)
        },
        // If validation failed
        validationFailed () {
          console.log('Validation failed')
        },
        // Another error happened
        error () {
          console.log('It\'s a disaster!')
        }
      }
    }
  }
}
</script>