https://github.com/arfedulov/vue-form-persist

Vue mixin for flexible form persistence
https://github.com/arfedulov/vue-form-persist

Last synced: about 2 months ago
JSON representation

Vue mixin for flexible form persistence

• Host: GitHub
• URL: https://github.com/arfedulov/vue-form-persist
• Owner: arfedulov
• Created: 2021-03-14T21:15:10.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-20T09:10:48.000Z (almost 4 years ago)
• Last Synced: 2024-11-16T14:36:11.246Z (2 months ago)
• Language: JavaScript
• Size: 216 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-form-persist

This package provides a mixin which adds persist functionality to

vue forms. The mixin exposes `persist()` method which you can call

in order to persist the component's data. The method is 1 second debounced

by default.

[live demo](https://arfedulov.github.io/vue-form-persist/)

An example of basic usage:

```html

```

```js

import { persistorMixin } from "@arfedulov/vue-form-persist";

export default {

  name: "DemoForm",

  mixins: [persistorMixin(["username"])], // specify field names that going to be persisted

  data() {

    return {

      username: "", // is persisted

      someOtherField: "" // is not persisted

    };

  }

};

```

There are three possibilities of how to provide a persistence key:

* provide an attribute `persist-id`

* provide a `persistKey` option to persistorMixin

* rely on default behaviour (component's `name` is used as a persistence key)

The key is chosen in the following priority: attribute, option, default.

An example of using more than one instances of the same component

using `persist-id` attribute:

```html

```

An example of using `persistorMixin` with options:

```js

export default {

    // ...

    mixins: [

        persistorMixin(["username", "email", "address"], {

            persistKey: "my-persist-id",

            debounceTime: 500 // ms

        })

    ],

    // ...

}

```