vue-sync-data

Auto Sync Vue Data to Query String

Install

npm install --save vue-sync-data

import Vue from 'vue'
import VueSyncData from 'vue-sync-data'
Vue.use(VueSyncData)

export default {
    data() {
        myNameString: 'This is my String'
    },
    dataSync: {
        myNameString: {
            type: String,
            name: 'name'
        }
    }
}

Now the query is kept in Sync with the Value

Options for the watchers

type - Define the Type of the Value

type: 
- required
- String | Number | Boolean | Array | Object

name - Define the Name in the Query

name: 
- required
- String

nullable - Define if the Value gets set to null or '' | 0 | false | [] | {} if the Object does not exist in query

nullable:
- Boolean
- default true

toNull - If a value given no query will be set if (value == toNull), if (toNull === null) a query will be always set

toNull:
- Any
- default [String: '' | Number: 0 | Boolean: false | Array: [] | Object: {}]

validate - Define a validation function for the value, if you return false, the value is deleted from the query

validate: 
- Function | null
- default null

throttled - Add throttle to the value watcher (Useful for inputs with fast typing, otherwise input gonna not be fluid) - Value in Miliseconds

throttled: 
- Number | false
- default 3000

proto - Define the design of the Object you wanna sync with the query, can contain all Options like a normal watcher

proto: 
- required when type Object
- Object of watchers

Developing

npm run dev // Build the Package, watch for changes and start a dev Server on localhost:8080 with running examples
npm run test // Run Tests
npm run lint // Lint the Package
npm run build // Build the Package

Contributing?

Please format your code before creating a pull-request.

Security

If you discover any security related issues, please email Graf Jakob.

Support on Beerpay

Hey dude! Help me out for a couple of :beers:!