title: Vue filter - Return object depending on search input
body: <p>I have this search input:</p>
  
  <pre><code>&lt;input type="text" v-model="searchHero" placeholder="Search Hero"&gt;
  </code></pre>
  
  <p>And this "output" area:</p>
  
  <pre><code>&lt;div class="item wrapper" v-for="hero in filterSearch"&gt;
    {{ hero.image }} &lt;br&gt;
    {{ hero.name }} &lt;br&gt;
    {{ hero.bookmark }} &lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The idea is that the user searches a hero, and the output should show only the hero he is searching for. For example, if he starts typing <code>Ir</code>, the output area should show <code>Iron Man</code> and <code>Iron Man2</code></p>
  
  <p>This is the full vue js code:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      searchHero: '',
      heroes: [
        { name: 'Spiderman', image: true, bookmark: 'Bookmarkhere' },
        { name: 'Hulk', image: true, bookmark: 'Bookmarkhere' },
        { name: 'Iron Man', image: true, bookmark: 'Bookmarkhere' },
        { name: 'Captain America', image: true, bookmark: 'Bookmarkhere' },
        { name: 'Iron Man2', image: true, bookmark: 'Bookmarkhere' }
      ]
    },
    computed: {
      filterSearch() {
        return this.heroes.filter( heroes =&gt; {
          return heroes.name.toLowerCase().includes(this.search.toLowerCase())
        })
      }
    }
  });
  </code></pre>
  
  <p>I get the following error in the console:</p>
  
  <p><strong>[Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"
  (found in )</strong></p>
  
  <p>I believe that the problem is with the filderSearch(), but I cannot see what.</p>
  
  <p>Here is the entire jsfiddle: <a href="https://jsfiddle.net/prozik/no2uLgrd/" rel="nofollow noreferrer">https://jsfiddle.net/prozik/no2uLgrd/</a></p>
  
  <p>Note: Replace <code>&lt;div class="item wrapper" v-for="hero in filterSearch"&gt;</code> to</p>
  
  <p><code>&lt;div class="item wrapper" v-for="hero in heroes"&gt;</code> if you want to see all the heroes.</p>