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