Instant search with Vue js and axios

Instant search with Vue js and axios using filter in computed property.

by gitamgadtaula

HTML

<div class="main">
  <div class="input-container">
    <input
      type="text"
      placeholder="Type a name"
      v-model="authorNameSearchString"
    />
  </div>

  <li class="photo" v-for="photo in filteredPhotoFeed" v-bind:key="photo.id">
    <img v-bind:src="photo.download_url" />

    <span class="author">{{ photo.author }}</span>
  </li>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: ".main",

    data() {
      return {
        authorNameSearchString: "",

        photoFeed: null,
      };
    },

    mounted() {
      axios

        .get("https://picsum.photos/v2/list?page=2&limit=10")

        .then((response) => {
          this.photoFeed = response.data;
        })

        .catch((error) => console.log(error));
    },

    computed: {
      filteredPhotoFeed: function () {
        var photos = this.photoFeed;

        var authorNameSearchString = this.authorNameSearchString;

        if (!authorNameSearchString) {
          return photos;
        }

        searchString = authorNameSearchString.trim().toLowerCase();

        photos = photos.filter(function (item) {
          if (
            item.author.toLowerCase().indexOf(authorNameSearchString) !== -1
          ) {
            return item;
          }
        });

        return photos;
      },
    },
  });
</script>
<style>
  img {
    width: 50px;
    height: 50px;
  }
</style>