Vue.js Filter count

by Bill Criswell

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    <ul>
        <h2>{{ filteredPhotos.length }} Photos</h2>
        <input type="text" v-model='searchQuery'>
        <h4 v-if="!filteredPhotos.length">No results</h4>
        <li v-for="photo in filteredPhotos">
            <img :src="photo.src" :alt="photo.name">
        </li>
    </ul>
</div>

JavaScript

var demo = new Vue({
    el: '#demo',
    
    data: {
        searchQuery: '',
        photos: [
            { src: '1', name: 'One'},
            { src: '2', name: 'Two'},
            { src: '3', name: 'Three'},
            { src: '4', name: 'Four'},
            { src: '5', name: 'Five'},
        ]
    },
    
    computed: {
      filteredPhotos: function () {
          return this.photos.filter(function(photo){
              return photo.name.indexOf(this.searchQuery) > -1;
          }.bind(this));
      }
    }
})