Created
January 30, 2017 07:57
-
-
Save anonymous/081a99f802f8a730d68dc01c13db44b0 to your computer and use it in GitHub Desktop.
Vue: Story Favorite Example It shows how custom event works // source https://jsbin.com/pamazeluwu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="It shows how custom event works"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <script src="https://code.jquery.com/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <title>Vue: Story Favorite Example</title> | |
| </head> | |
| <body> | |
| <div id="app" class="container"> | |
| <h1>Let's hear some stories</h1> | |
| <ul class="list-group"> | |
| <story v-for="story in stories" | |
| :story="story" | |
| :favorite="favorite" | |
| @update="updateFavorite"> | |
| </story> | |
| </ul> | |
| </div> | |
| <template id="story-template"> | |
| <li class="list-group-item"> | |
| {{ story.writer }} said "{{ story.plot }}" | |
| Story upvoted {{ story.upvotes }} | |
| <button v-show="!story.voted" @click="upvote" class="btn btn-default btn-sm">Upvote</button> | |
| <button | |
| v-show="!isFavorite" | |
| @click="updateFavorite" | |
| class="btn btn-primary btn-sm"> | |
| Favorite | |
| </button> | |
| <span v-show="isFavorite" class="glyphicon glyphicon-star pull-right" aria-hidden="true"></span> | |
| </li> | |
| </template> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> | |
| <script id="jsbin-javascript"> | |
| Vue.component('story', { | |
| template: '#story-template', | |
| props: ['story', 'favorite'], | |
| methods: { | |
| upvote() { | |
| this.story.voted = true | |
| this.story.upvotes++ | |
| }, | |
| updateFavorite() { | |
| this.$emit('update', this.story) | |
| } | |
| }, | |
| computed: { | |
| isFavorite() { | |
| return this.story == this.favorite | |
| } | |
| } | |
| }) | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| stories: [ | |
| { | |
| plot: 'My horse is amazing.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'Narwhals invented Shish Kebab.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'The dark side of the Force is stronger.', | |
| writer: 'Darth Vader', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'One does not simply walk into Mordor', | |
| writer: 'Boromir', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| ], | |
| favorite: {} | |
| }, | |
| methods: { | |
| updateFavorite: function(story) { | |
| this.favorite = story; | |
| } | |
| } | |
| }) | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">Vue.component('story', { | |
| template: '#story-template', | |
| props: ['story', 'favorite'], | |
| methods: { | |
| upvote() { | |
| this.story.voted = true | |
| this.story.upvotes++ | |
| }, | |
| updateFavorite() { | |
| this.$emit('update', this.story) | |
| } | |
| }, | |
| computed: { | |
| isFavorite() { | |
| return this.story == this.favorite | |
| } | |
| } | |
| }) | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| stories: [ | |
| { | |
| plot: 'My horse is amazing.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'Narwhals invented Shish Kebab.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'The dark side of the Force is stronger.', | |
| writer: 'Darth Vader', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'One does not simply walk into Mordor', | |
| writer: 'Boromir', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| ], | |
| favorite: {} | |
| }, | |
| methods: { | |
| updateFavorite: function(story) { | |
| this.favorite = story; | |
| } | |
| } | |
| })</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Vue.component('story', { | |
| template: '#story-template', | |
| props: ['story', 'favorite'], | |
| methods: { | |
| upvote() { | |
| this.story.voted = true | |
| this.story.upvotes++ | |
| }, | |
| updateFavorite() { | |
| this.$emit('update', this.story) | |
| } | |
| }, | |
| computed: { | |
| isFavorite() { | |
| return this.story == this.favorite | |
| } | |
| } | |
| }) | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| stories: [ | |
| { | |
| plot: 'My horse is amazing.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'Narwhals invented Shish Kebab.', | |
| writer: 'Mr. Weebl', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'The dark side of the Force is stronger.', | |
| writer: 'Darth Vader', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| { | |
| plot: 'One does not simply walk into Mordor', | |
| writer: 'Boromir', | |
| upvotes: 0, | |
| voted: false | |
| }, | |
| ], | |
| favorite: {} | |
| }, | |
| methods: { | |
| updateFavorite: function(story) { | |
| this.favorite = story; | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment