Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
tests/unit
.babelrc
.gitignore
.travis.yml
README.md
jest.config.js
package.json
stryker.conf.js
yarn.lock

README.md

npm version Build Status codecov

Vue Form State

Handle asynchronous loading, error and result states based on the result of a promise.

Installation

yarn add @netsells/vue-form-state
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

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:

    <form-state :submit="submitForm">
        <template
            v-slot:default="{
                submit,
                error,
                loading,
                result,
            }"
        >
            <form @submit.prevent="submit">
                <!-- your form -->
            </form>
        </template>
    </form-state>

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:

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:

<form-state
    :submit="submitForm"
    @result="handleResult"
    @error="handleError"
>
    <!-- template -->
</form-state>
methods: {
    handleResult(result, rawResult) {
        // code
    },

    handleError(error, rawError) {
        // code
    },
}
You can’t perform that action at this time.