-
- GitHub
- GitLab
- Bitbucket
-
By logging in you accept
our terms of service
and privacy policy
A vue.js extention for easier model handling. Inspired by Backbone.js, Eloquent from laravel and Vuejs itself.
Homepage Repository npm Download
npm install vue-eloquent@0.2.33
See the Docs page.
A Vue plugin to make your code yet again a little more readable.
Install the plugin in your main javascript file: main.js
import Vue from 'vue';
import VueEloquent from 'vue-eloquent';
Vue.use(VueEloquent);
In a Vue component we can now create a "smart" collection with this.$collection. After this we are able to fetch the collection from the server with this.todos.fetch().
Todos.vue
<template>
<div v-for="todo in todos" :key="todo.id">
{{ todo.description }}
</div>
</template>
<script>
export default {
mounted() {
this.todos.fetch();
},
data() {
return {
todos: this.$collection({
url: '/api/todos' // I need this to know where the api calls should go.
})
}
}
}
</script>
Because a $collection is filled with super smart $models we can now do stuff like this:
Todos.vue
<template>
<div>
<div v-for="todo in todos" :key="todo.id">
<span @click="todo.update({ status: !todo.status })">
{{ todo.status ? 'O' : 'X' }}
</span>
<span>{{ todo.description }}</span>
<button @click.stop="todo.remove">X</button>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.todos.fetch();
},
data() {
return {
todos: this.$collection({
url: '/api/todos'
})
}
}
}
</script>
In the above code todo.update will make an axios.put call with the todo as payload. Remove will make an axios.delete call width the id.
Todos.vue
<template>
<div>
<input
type="text"
placeholder="New todo"
@keyup.enter="createTodo"
v-model="newTodo" />
<div v-for="todo in todos" :key="todo.id">
<span @click="todo.update({ status: !todo.status })">
{{ todo.status ? 'O' : 'X' }}
</span>
<span>{{ todo.description }}</span>
<button @click.stop="todo.remove">X</button>
</div>
</div>
</template>
<script>
export default {
mounted() {
this.todos.fetch();
},
methods: {
createTodo() {
this.todos
.create({ description: this.newTodo })
.then(resp => {
this.newTodo = '';
});
}
},
data() {
return {
todos: this.$collection({
url: '/api/todos'
}),
newTodo: ''
}
}
}
</script>
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.
Learn more →Login to resync this project