If you are familiar with Vue.js component's prop, you already knows how to use QuickProp. QuickProp is a JavaScript data model made easy.
npm i quick-prop
import QuickProp from 'quick-prop'
import { v4 as uuidv4 } from 'uuid';
class Todo extends QuickProp {
constructor(todo = {}) {
super({
id: {
type: [Number, String],
default() {
return uuidv4()
}
},
title: {
type: String,
required: true
},
completed: {
type: Boolean,
default: () => false
}
}, todo)
}
}
const todo = new Todo({
title: 'Example todo'
})
todo.completed = true
console.log(JSON.stringify(todo))
Result:
{
"id": "f24b19a2-e327-4199-88e9-1c5c8e4b8b82",
"title": "Example todo",
"completed": true
}
In some case where data reactivity is needed, you could use the Vuejs plugin to make quick-prop
reactive.
import Vue from 'vue'
import { QuickPropVue } from 'quick-prop'
Vue.use(QuickPropVue)
- Better implementation
- Add Type Decorator
- Vue Reactive
License under MIT