vuejs
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Working with real data 107<br />
1 <br />
2 <br />
3 <br />
4 Upvote<br />
5 <br />
6 <br />
7 Delete<br />
8 <br />
9 <br />
10 <br />
We append a ‘Delete’ button to the ‘actions’ column, binded to a method to delete the story. The<br />
deleteStory method will be:<br />
1 Vue.component('story',{<br />
2 ...<br />
3 methods: {<br />
4 ...<br />
5 deleteStory: function(story){<br />
6 vm.stories.$remove(story)<br />
7 }<br />
8 }<br />
9 ...<br />
10 })<br />
But of course, this way, we will only remove the story temporary. In order to delete the story from<br />
the database, we have to perform an AJAX DELETE request.<br />
1 Vue.component('story',{<br />
2 ...<br />
3 methods: {<br />
4 ...<br />
5 deleteStory: function(story){<br />
6 vm.stories.$remove(story)<br />
7 $.ajax({<br />
8 url: '/api/stories/'+story.id,<br />
9 type: 'DELETE'<br />
10 });<br />
11 },<br />
12 }<br />
13 ...<br />
14 })