JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="app">

  <div id="container">
    <h1>let's hear some stories</h1>
    <ul>
      <!-- init component -->
      <story v-for="story in stories" :story="story" :favorite="favorite"></story>
    </ul>
  </div>
  <!-- // #container -->
  
</div>
<!-- // #app -->


<!-- templates -->
<template id="story-template">
  <li>
    {{ story.writer }} said "{{ story.plot }}". story voted {{ story.upvotes }}
    <button v-show="!story.voted" @click="upvote">upvote</button>
    <button v-show="!isFavorite" @click="setFavorite">favorite</button>
    <span v-show="isFavorite">★</span>
  </li>
</template>

JavaScript

Vue.component('story', {
	template: '#story-template',
  props: ['story', 'favorite'],
  methods: {
  	upvote: function() {
    	this.story.upvotes += 1;
      this.story.voted = true;
    },
    setFavorite: function() {
    	this.favorite = this.story;
    }
  },
  computed: {
  	isFavorite: function() {
    	return this.story == this.favorite;
    }
  }
});

new Vue({
	el: '#app',
  data: {
  	stories: [
    	{
      	plot: 'my horse is amazing',
        writer: 'mr. weebl',
        upvotes: 10,
        voted: false
      },
      {
      	plot: 'narwhals invented shish kebab',
        writer: 'mr. weebl',
        upvotes: 30,
        voted: false
      },
      {
      	plot: 'the dark side of force is stronger',
        writer: 'darth vader',
        upvotes: 20,
        voted: false
      },
      {
      	plot: 'one does not simply walk into morder',
        writer: 'boromir',
        upvotes: 40,
        voted: false
      },
    ],
    favorite: {}
  }
});