@lassehaslev/restful-vue
v0.1.5
Published
Helpers for showing, update and delete elements
Downloads
4
Readme
@lassehaslev/restful-vue
Helpers for showing, update and delete elements
Install
Run npm install @lassehaslev/restful-vue --save
in your project folder
This class contains mixins for making the use of restful apis easier.
We help you to add new items, update items and remove them from index with simple steps.
Usage
To get any of the mixins just get what you want from the @lassehaslev/restful-vue
import Vue from 'vue'
// Install plugin and dependencies
import RestfulVue from '@lassehaslev/restful-vue';
Vue.use( RestfulVue );
// Import everything
import { container, create, update, remove } from '@lassehaslev/restful-vue'
// If you only want the container
import { container } from '@lassehaslev/restful-vue'
Container
The container mixin is to handle list of items and index. This is also where we add newly created models, and remove them on delete.
The container is also the home of the objects that uses the Create mixin and Edit mixin.
<template>
<update v-for="model in models" :url="'/api/update/' + model.id" :model="model"></update>
<create url="/api/store"></create>
</template>
<script>
import { container } from '@lassehaslev/restful-vue'
module.exports = {
mixins: [ container ],
components: {
Create,
Edit,
}
}
</script>
Create
Create is the mixin thats create an elements an push it in to the container
<template>
<button @click="create" class="add">Create</button>
</template>
<script>
import { create } from '@lassehaslev/restful-vue'
module.exports = {
mixins: [ create ],
}
</script>
Update and Delete
The update mixin is for updating items. When updated the new items goes into the container index list.
The Delete sends out that the item should be deleted and it gets removed from the container.
<template>
<div>
<form @submit="update">
<input id="" type="text" v-model="model.name">
<button type="submit">Update</button>
</form>
<span @click="delete">X</span>
</div>
</template>
<script>
import { update, remove } from '@lassehaslev/restful-vue'
module.exports = {
mixins: [ update, remove ],
}
</script>
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev