title: Vue.js empty filter results
body: <p>In Vue, I have to filter through some data:</p>
  
  <pre><code>&lt;input v-model="search"&gt;
  &lt;ul&gt;
      &lt;li v-repeat="photo in photos | filterBy search in 'name'"&gt;
          &lt;img src="{{ photo.src }}" alt="{{ photo.name }}"&gt;
      &lt;/li&gt;
      &lt;li v-if="!photos.length"&gt;
          No results, sorry!
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How can I detect empty filter results and display an appropriate message to the user?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I am currently doing the following which I feel is a hacky workaround:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input v-model="search"&gt;
  &lt;ul&gt;
      &lt;li v-repeat="photo in photos"&gt;
          &lt;img src="{{ photo.src }}" alt="{{ photo.name }}"&gt;
      &lt;/li&gt;
      &lt;li v-if="!photos.length"&gt;
          No results, sorry!
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript:    </p>
  
  <pre><code>var v = new Vue({
      data: {
          allPhotos: [...],
          photos: [],
          search: '',
      },
      ready: function () {
          var filter = Vue.filter('filterBy');
          var self = this;
          this.$watch('search', function () {
              self.photos = filter(self.allPhotos, self.search, 'name');
          }, {
              immediate: true
          });
      }
  })
  </code></pre>