vuejs

Integrating vue-resource 121
1 Vue.component('story',{
2 ...
3 methods: {
4 ...
5 storeStory: function(story){
6 this.$http.post('/api/stories/', story).then(function(response) {
7 Vue.set(story, 'id', response.data.id);
8 story.editing = false;
9 });
10 },
11 }
12 ...
13 })
I use Vue.set(story, 'id', response.data.id) instead of story.id = response.data.id because
inside our table we display the id of each story. Since the new story had no id when pushed
to the stories array the DOM won’t be updated when the id changes, so we will not be able to see
the new id.
Tip
When you are adding a new property that wasn’t present when the data was observed,
Vue.js cannot detect the property’s addition. So, if you need to add or remove properties at
runtime, use the global Vue.set or Vue.delete methods.
10.4 JavaScript File
As you may have noticed, our code is becoming big, and as our project grows, it will be hard to
maintain. For starters, we’ll separate the JavaScript code from the HTML. I’ll create a file called
app.js and I’ll save it under js directory.
All the JavaScript code should live inside that file from now on. To include the newly created script
to any HTML page you simply have to add this tag
1
and you are ready to go!