JSFiddle - React, Tailwind, and code Playground

by Alex Kyriakidis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <body>
        <div class="container">
            <h1>All stories</h1>
            <div>
                <ul class="list-group">
                    <li v-for="story in stories"
                        class="list-group-item"
                    >
                        "{{ story.plot }}". Upvotes: <strong>{{story.upvotes}}</strong>
                        <button class="btn btn-primary" @click="story.upvotes++"> Upvote </button>
                        <button class="btn btn-danger" @click="story.upvotes--"> Downvote </button>
                    </li>
                </ul>
            </div>
            <div>
                <h1>Stories with upvotes > 30 ({{famous.length}})</h1>
                <ul class="list-group">
                    <li v-for="story in famous"
                        class="list-group-item"
                    >
                        "{{ story.plot }}". Upvotes: <strong>{{story.upvotes}}</strong>
                    </li>
                </ul>
            </div>
        </div>
    </body>

JavaScript

var vm = new Vue({
        el: '.container',
        data: {
            stories: [
                {
                    plot: "I find your lack of faith disturbing.",
                    upvotes: 28
                },
                {
                    plot: "Great shot kid, that was one in a million.",
                    upvotes: 28
                },
                {
                    plot: "General Grievous, you're shorter than I expected.",
                    upvotes: 29
                },
                {
                    plot: "I sense great fear in you, Skywalker.",
                    upvotes: 41
                },
            ]
        },
        computed: {
            famous: function() {
                return this.stories.filter(function(item){
                    return item.upvotes > 30;
                }); 
            }
        }
    })