vuejs

Integrating vue-resource 125
1 Vue.component('story', {
2 template: '#template-story-raw',
3 props: ['story'],
4 methods: {
5 deleteStory: function (story) {
6 this.$parent.stories.$remove(story)
7 this.$http.delete('/api/stories/' + story.id)
8 },
9 upvoteStory: function (story) {
10 story.upvotes++;
11 this.$http.patch('/api/stories/' + story.id, story)
12 },
13 editStory: function (story) {
14 story.editing = true;
15 },
16 updateStory: function (story) {
17 this.$http.patch('/api/stories/' + story.id, story)
18 // Set editing to false to show actions again and hide the inputs
19 story.editing = false;
20 },
21 storeStory: function (story) {
22 this.$http.post('/api/stories/', story)
23 .then(function (response) {
24 // After the the new story is stored in the database
25 // we fetch again all stories
26 // vm.fetchStories();
27 // OR Better, update the id of the created story
28 Vue.set(story, 'id', response.data.id);
29 // Set editing to false to show actions again and hide the inputs
30 story.editing = false;
31 });
32 },
33 }
34 })
35 new Vue({
36 el: '#v-app',
37 data: {
38 stories: [],
39 },
40 ready: function () {
41 this.fetchStories()
42 },