Получение данных из веб-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.js:
<script src=”https://unpkg.com/vue/dist/vue.js"> </script>
- Импортировать Axios:
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>
Определите новое приложение 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
в качестве предиката, чтобы выбрать только фотографии с автором, указанным в строке поиска.
Каждый раз при изменении входной строки это свойство вычисляется повторно, а интерфейс обновляется.
Это небольшая демонстрация окончательного результата с добавлением некоторых анимаций в список, чтобы сделать его более привлекательным. Здесь вы можете найти весь код.