Vue 2 - Searchbar

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">
      <li v-for="story in search" class="list-group-item">
        {{ story.writer }} dijo "{{ story.plot }}"
      </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
              }
           ],
             query: ' '
         },

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