title: Creating Vue Search Bar | How to hide/show data based on input?
body: <p>I am creating a dynamic search bar that will filter a sidebar full of names based on user input. However, I am having trouble temporarily hiding and showing data based on the search bar's value on keyup. What is the best way to achieve this the "Vue way"?</p>
  
  <p>On keyup, I want to filter through all of the this.people data and only show names that contain the value of the search input.</p>
  
  <p>Below is what my code looks like</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('sidebar',{
      props: ['people', 'tables'],
      data: () =&gt; {
          return {
              fullName: ''
          }
      },
      computed: {
          computed() {
              return [this.people, this.tables].join()
          }
      },
      template: 
      `
          &lt;div id="sidebarContain" v-if="this.people"&gt;
              &lt;input id="sidebar-search" type="text" placeholder="Search..." @keydown="searchQuery"&gt;
              &lt;select id="sidebar-select" @change="sidebarChanged"&gt;
                  &lt;option value="AZ"&gt;A-Z&lt;/option&gt;
                  &lt;option value="ZA"&gt;Z-A&lt;/option&gt;
                  &lt;option value="notAtTable"&gt;No Table&lt;/option&gt;
                  &lt;option value="Dean's Guest"&gt;Dean's Guest&lt;/option&gt;
                  &lt;option value="BOO | VIP"&gt;BOO | VIP&lt;/option&gt;
              &lt;/select&gt;
              &lt;div v-for="person in people" :class="[{'checked-in': isCheckedIn(person)}, 'person']" :id="person.id" :style="calcRegColor(person)"&gt;
                  &lt;span v-if="person.table_name"&gt;{{person.first_name + ' ' + person.last_name + ' - ' + person.table_name}}&lt;/span&gt;
                  &lt;span v-else&gt;{{person.first_name + ' ' + person.last_name}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      `,
      methods: {
          isCheckedIn(person) {
             return person.reg_scan == null ? true : false;
          },
          isHidden(person)
          {
              console.log("here");
          },
          calcRegColor(person)
          {
              switch(person.registration_type)
              {
                  case "Dean's Guest" :
                      return {
                          color: 'purple'
                      }
                      break;
                  case "BOO | VIP" :
                      return {
                          color: 'brown'
                      }
                      break;
                  case "Student" :
                      return {
                          color: 'green'
                      }
                      break;
                  case "Faculty":
                  case "Staff":
                      return {
                          color: 'blue'
                      }
                      break;
                  case "Alumni Club Leader":
                      return {
                          color: 'gold'
                      }
                      break;
                  case "Table Guest" :
                      return {
                          color: 'pink'
                      }
                      break;
                  default: 
                      return {
                          color: 'black'
                      }
              }
          }
      },
      watch: {
          computed() {
              console.log("People and Tables Available");
          }
      }
  });
  
  var app = new Vue({
    el: '#main',
    data: {
      tables: {},
      people: [],
      currentAlerts: [],
      lastDismissed: []
    },
    methods: {
      loadTables() {
          $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'users/getTableAssignments/' + event_id
          }).done(data =&gt; {
            this.tables = data; 
          });
      },
      loadPeople() {
          $.ajax({
              method: 'POST',
              dataType: 'json',
              url: base_url + 'users/getParticipants2/' + event_id
          }).done(data =&gt; {
              this.people = data;
              this.sortSidebar(this.people);
          });
      },
      loadCurrentAlerts() {
          $.ajax({
              method: 'POST',
              dataType: 'json',
              url: base_url + 'alerts/getAlerts/' + event_id
          }).done(data =&gt; {
              this.currentAlerts = data;
          });
      },
      loadLastDismissed(num = 15)
      {
          $.ajax({
              method: 'POST',
              dataType: 'json',
              url: base_url + 'alerts/getLastDismissed/' + event_id + '/' + num
          }).done(data =&gt; {
              this.lastDismissed = data;
          });
      },
      setRefresh() {
          setInterval(() =&gt; {
              console.log("Getting People and Tables");
              this.loadPeople();
              this.loadTables();
          }, 100000);             
      },
      makeTablesDraggable() {
          $(document).on("mouseenter", '.table', function(e){
           var item = $(this); 
           //check if the item is already draggable
           if (!item.is('.ui-draggable')) {
                   //make the item draggable
                   item.draggable({
                      start: (event, ui) =&gt; {
                          console.log($(this));
                      }
                   });
            }
          });
      },
      makePeopleDraggable() {
           $(document).on("mouseenter", '.person', function(e){
           var item = $(this); 
           //check if the item is already draggable
           if (!item.is('.ui-draggable')) {
                   //make the item draggable
              item.draggable({
                  appendTo: 'body',
                  containment: 'window',
                  scroll: false,
                  helper: 'clone',
                  start: (event, ui) =&gt; {
                      console.log($(this));
                  }
              });
            }
          });       
      }
      makeDroppable() {
          $(document).on("mouseenter", ".dropzone, .table", function(e) {
              $(this).droppable({
                  drop: function(ev, ui) {
                      console.log("Dropped in dropzone");
                  }
              });
          });
      }
   },
    mounted() {
      this.loadTables();
      this.loadPeople();
      this.loadCurrentAlerts();
      this.loadLastDismissed();
      this.setRefresh();
      this.makeTablesDraggable();
      this.makePeopleDraggable();
      this.makeDroppable();
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
   &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  &lt;div id="app"&gt;
      &lt;sidebar :people="people" :tables="tables"&gt;&lt;/sidebar&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>