https://github.com/netsells/vue-form-state
https://github.com/netsells/vue-form-state
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/netsells/vue-form-state
- Owner: netsells
- Created: 2019-03-20T14:12:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-04-13T13:12:48.000Z (about 3 years ago)
- Last Synced: 2025-02-02T18:51:58.872Z (3 months ago)
- Language: JavaScript
- Size: 4.22 MB
- Stars: 0
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/%40netsells%2Fvue-form-state)
[](https://travis-ci.com/netsells/vue-form-state)
[](https://codecov.io/gh/netsells/vue-form-state)
# Vue Form State
Handle asynchronous loading, error and result states based on the result of a
promise.
Created and maintained by the [Netsells team](https://netsells.co.uk/)
## Installation
```
yarn add @netsells/vue-form-state
```
```javascript
import Vue from 'vue';
import VueFormState from '@netsells/vue-form-state';
Vue.use(VueFormState);
```
### Options
You can pass the following options to change the way it functions
```javascript
Vue.use(VueFormState, {
parseError(error) {
return error.response.data.message;
},
name: 'handle-form-state',
});
```
#### parseError
Parses an error for every form (i.e. globally). Output is stored in `error`
(original error is in `rawError`)
#### parseResult
Parses a response for every form (i.e. globally). Output is stored in `result`
(original response is in `rawResult`)
#### name
Change the name of the component (`form-state` by default)
## Usage
In your template:
```html
```
Note that the `submit` callback is a prop on the `form-state` component. This is
so it has access to the return value (your promise).
In your methods:
```javascript
methods: {
submitForm() {
return fetch(url, {
method: 'POST',
body: JSON.stringify(this.formData),
});
}
}
```
The result of this promise will be set to `rawResult` in the slot. If it errors,
the error will be set to the `rawError` scoped slot. If you have supplied either
a `parseResult` or `parseError` optional functional, the result of these will be
available as `result` and `error` respectively.
You can also get the result or error via an event emitted by `form-state`:
```html
```
```javascript
methods: {
handleResult(result, rawResult) {
// code
},
handleError(error, rawError) {
// code
},
}
```