JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <h1>¡Escuchemos algunas historias famosas! ({{famous.length}})</h1>
  <div class="container">
    <h1>¡Escuchemos algunas historias famosas! ({{famous.length}})</h1>
        <ul class="list-group">
            <li v-for="story in famous"
            class="list-group-item"
            >
                {{ story.writer }} dijo "{{ story.plot }}"
                {{ story.upvotes }} votos.
            </li>
        </ul>
    </div>
  <pre>
    {{ $data }}
  </pre>
</div>

JavaScript

new Vue({
    el: '.container',
    data: {
        stories: [
            {
                plot: "¡Estrellé mi auto hoy!",
                writer: "Alex",
                upvotes: 28
            },
            {
            plot: "¡Ayer, alguien robó mi bolso!",
                writer: "John",
                upvotes: 8
            },
            {
                plot: "Alguien se comió mi chocolate...",
                writer: "John",
                upvotes: 51
            },
            {
                plot: "¡Me comí el chocolate de alguien!",
                writer: "Alex",
                upvotes: 74
            },
        ]
    },
    computed: {
        famous: function() {
            return this.stories.filter(function(item){
                return item.upvotes > 25;
            });
        }
    }
})