vuejs
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Integrating vue-resource 113<br />
1 ready: function() {<br />
2 // GET request<br />
3 this.$http({url: '/api/stories', method: 'GET'}).then(function (response) {<br />
4 var storiesReady = response.data.map(function(story){<br />
5 story.editing = false;<br />
6 return story<br />
7 })<br />
8<br />
9 this.$set('stories', storiesReady)<br />
10 })<br />
11 }<br />
Info<br />
The .map() method calls a defined callback function on each element of an array and<br />
returns an array that contains the results. You can find more information about the .map()<br />
method and its syntax Here⁴<br />
The function passes the new attribute inside each story object and then returns the updated story.<br />
The new variable storiesReady is an array that contains our updated array with the new attribute<br />
on.<br />
When the story is under edit, we will give the user two options, to update the story with new values,<br />
and to cancel the edit.<br />
Form inputs for story editing<br />
So, lets move on and add two new buttons that should be displayed only when the user is editing<br />
a story. Additionally a new method called updateStory will be created, which updates the current<br />
editing story, after the ‘Update Story’ button is pressed.<br />
⁴https://msdn.microsoft.com/en-us/library/ff679976(v=vs.94).aspx