Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

npm version Build Status codecov

Vue Form State

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

Created and maintained by the Netsells team

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
    },
}

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

No packages published