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!</h1>
    <div>
        <div class="form-group">
            <label for="query">¿Qué estás buscando?</label>
            <input v-model="query" class="form-control">
        </div>
        <h3>Resultados de la búsqueda:</h3>
        <ul class="list-group">
            <story v-for="story in search"
            :story="story"></story>
        </ul>
    </div>
</div>

<template id="story-template">
  <li class="list-group-item">
    {{ story.writer }} dijo "{{ story.plot }}"
  </li>
</template>

JavaScript

Vue.component('story', {
	props: ['story'],
  template: '#story-template'
});

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
              }
           ],
             query: ' '
         },

         computed: {
           search: function () {
             var query = this.query
             return this.stories.filter(function (story) {
               return story.plot.includes(query)
             })
           }
         }
     })