Получение данных из веб-API и добавление динамического фильтра с вычисляемыми свойствами

Vue.js - это фреймворк с большим потенциалом. Его легко освоить, он быстрый и легкий в байтах. Я начал свой путь с написания статьи о Vue.js с статьи Как создать свое первое приложение на Vue.js. Теперь я собираюсь продолжить эту статью о том, как сделать поле ввода мгновенного поиска для фильтрации данных, которые поступают из веб-API Lorem Picsum.

Окончательный результат вы найдете в моем репозитории.

Ингредиенты

  • Библиотека Vue.js: наш фреймворк Javascript
  • Библиотека Axios: HTTP-клиент на основе обещаний, мы будем использовать его для вызова Lorem Picsum Web API.
  • Публичный URL-адрес API Lorem Picsum: https://picsum.photos/v2/list?page=2&limit=10
  • Файл, из которого будет составлено наше приложение: index.html file, app.js, style.css

Первые шаги

Прежде всего, давайте проверим, что выводит Lorem Picsum Web API:

Веб-API возвращает массив JSON, представляющий список изображений с URL-адресом, автором и идентификатором. Это свойства, которые будут определять нашу модель приложения.

Затем разработайте простой скелет приложения с заголовком, текстовым полем ввода, списком изображений и именами авторов. Сначала это выглядит так:

Основная часть этой веб-страницы очень проста:

Благодаря очень простой работе с CSS, стиль списка изображений следующий:

И стиль поля ввода:

Интеграция с Vue.js

Пришло время добавить динамичности нашему маленькому приложению:

Определите новое приложение Vue:

Как видите, мы связали приложение с элементом #app-instasearch и определили два свойства:

  • authorNameSearchString: он будет содержать строку поиска, привязанную к нашему полю ввода
  • photoFeed: он будет содержать массив изображений после загрузки

В JSON, который мы читали ранее, мы узнали, какие свойства представляют нашу модель. Итак, следующий шаг - добавить все привязки Vue к нашему HTML-файлу.

Привязка поля ввода к нашему authorNameSearchString:

Привязка основного списка:

  • v-for=”photo in filteredPhotoFeed”: позволяет Vue повторять li для каждого элемента в массиве filteredPhotoFeed.
  • v-bind:key=”photo.id”: Важно выбрать ключ для уникального представления изображения, чтобы иметь возможность анимировать список.
  • v-bind:src=”photo.download_url”: Без этого мы не увидим изображение
  • {{ photo.author }}: Чтобы напечатать имя автора рядом с каждой фотографией

Установленные функции

В Vue.js вы можете добавлять смонтированные функции, которые представляют собой просто хуки, которые будут вызываться после того, как экземпляр Vue будет загружен и привязан к интерфейсу. В этом случае нам нужно получить данные из веб-API, и это правильное место.

В этом примере мы используем Axios для выполнения HTTP-вызова и управления его обратными вызовами. В частности, мы будем использовать JSON данные ответа в массив photoFeed приложения и будем записывать в консоль вывода возможные ошибки.

Вычисленные свойства

Вычисляемые свойства - это кэшированные свойства приложения Vue, и они пересчитываются только при реактивных изменениях зависимостей. Обратите внимание, что если определенная зависимость находится за пределами области действия экземпляра (т. Е. Не является реактивной), вычисленное свойство не будет обновлено.

В этом случае мы будем использовать их для применения фильтра мгновенного поиска.

Во-первых, мы проверяем отсутствие ввода, не рассматривая пустые или пустые строки. Затем нам нужно вернуть массив фотографий, отфильтрованных со строкой поиска. Для этого мы используем метод filter и функцию indexOf в качестве предиката, чтобы выбрать только фотографии с автором, указанным в строке поиска.

Каждый раз при изменении входной строки это свойство вычисляется повторно, а интерфейс обновляется.

Это небольшая демонстрация окончательного результата с добавлением некоторых анимаций в список, чтобы сделать его более привлекательным. Здесь вы можете найти весь код.