vuejs

Components 77
16
17
1 Vue.component('story', {
2 template: "#story-template",
3 props: ['story'],
4 methods:{
5 upvote: function(){
6 this.story.upvotes += 1;
7 this.story.voted = true;
8 },
9 setFavorite: function(){
10 this.favorite = this.story;
11 },
12 },
13 computed:{
14 isFavorite: function(){
15 return this.story == this.favorite;
16 },
17 }
18 });
19
20 new Vue({
21 el: '#app',
22 data: {
23 stories: [
24 ...
25 ],
26 favorite: {}
27 }
28 })
If you try to run the above code, you will notice that it does not work as it should be. Whenever you
try to favorite a story, the variable favorite inside $data remains null and we get none response.
It seems that our story component is unable to update favorite object, so we are going to pass it
on each story and add favorite to component’s properties.