FormFetch
Features
Allows you to use the HTTP methods GET and POST to send or get data gathered from any number of form fields.
If you do not have yarn
you can download it here.
Instructions for global registration
yarn add @160over90/vue-form-fetch
Include in main.js (app entry point)
import FormFetch from '@160over90/vue-form-fetch';
Vue.use(FormFetch);
Instructions for editing this package
yarn install
Compiles and hot-reloads for development
yarn run serve
Attributes
method
the method attribute excepts the "GET" or "POST" HTTP methods.
action
the action attribute excepts your API endpoint or path to PHP middleware.
Example
<FormFetch
method="POST"
action="/submit-form.php"
>
<template slot-scope="{ state, response }">
<div>
<label>
<div>First Name</div>
<input name="firstName">
</label>
</div>
<div>
<label>
<div>Last Name</div>
<input name="lastName">
</label>
</div>
<button v-text="'Submit'"/>
<p v-if="state === 'pending'>
Submitting your request...
</p>
<p v-else-if="state === 'rejected'">
Sorry, that didn't work!
</p>
<p v-else-if="state === 'fulfilled'">
{{ response.ok
? "You're good to go!"
: "Sorry, that didn't work!"
}}
</p>
</template>
</FormFetch>
Props
init (Object, Default: null)
Allows you to pass a configuration object.
Example
<FormFetch
method="POST"
action="/submit-form.php"
:init="{
mode: 'cors',
cache: 'no-cache',
}"
>
...
For request properties, refer to: https://developer.mozilla.org/en-US/docs/Web/API/Request.
License
MIT