Detailed explanation of the use of vue-hook-form

vue-hook-form

Used to process form requests and get formData. Easy to convert form requests into ajax/fetch requests

Install

npm install vue-hook-form

use

VUE version:
Must be used in the webpack template environment generated by vue-cli

1. Register & Configure Components

// Here is an example using global registration in the middleimport vue from 'vue'
import hookForm from 'vue-hook-form'
// Configure hooks before global form serialization = (vm, next) => {
 // vm: corresponding hookForm vm instance // next: Continue to execute // You can perform form verification here}
// Configure the hook before submitting the global form = request => {
 // request: contains the basic information of this request // You can perform form verification here or use ajax to submit this request}
('hook-form', hookForm)

Request object:

{
 url: 'Request Address',
 body: 'Request Parameters',
 method: 'Request method',
 vm: 'The corresponding hookForm vm instance'
}

2. Use in vue files

<template>
 <hook-form action="users" :on-submit="onSubmit" :before-serialize="beforeSerialize">
 <input name="name">
 <input name="age">
 <button>submit</button>
 </hook-form>
</template>
<script>
 export default {
 methods: {
  // Local hook  beforeSerialize (vm, next) {
  // next: Continue to execute  // You can perform form verification here  },
  onSubmit (request) {
  // request: contains the basic information of this request  // You can perform form verification here or use ajax to submit this request  }
 }
 }
</script>

Configuration

onSubmit

Global hook before form submission.

beforeSerialize

Global hook before form serialization. It is generally used to verify forms, but at this time, there is no need to serialize form. It also facilitates changing form content before onSubmit is triggered

json

Whether to convert to json format, default to url string. Default: false

 = request => {
 // Format of url string // Shape: name=Zhang San&age=18}
// Configure in json format = true
 = request => {
 // in json format}

Props

action: request address
method: Request method. Default: post
onSubmit: local hook before form submission
beforeSerialize: local hook before form serialization
json: Whether to convert to json format (priority to use local json configuration). Default: false
disabled: Disabled

About disabled

You can prevent multiple submissions of form by using this option

 = request => {
 // Form submission is prohibited  = true
 // Release the disabled after ajax request or other related operations. doSomeThing()
 .then(() => {
   = false
 })
}

Frequently Asked Questions

The request was submitted in the global onSubmit and the request was returned. How do you notify the corresponding components of these operations?

There is a vm property in the Request object, which is a vue instance of the hookForm component itself.Parent-child component communication
In other words, hookForm only plays the role of the bridge between form and ajax, responsible for transmitting form form data. You can secondaryly encapsulate a form component with more functions based on it

Will global hooks and local hooks be fired at the same time?

Won't. If there is a local hook, the local will be triggered first, otherwise the global will be triggered.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.