Создание autoselect-компонента на Symfony/Vue. Часть 1.

Привет, друг. Мой первый компонент, написанный на Vue — это автовыпадашка по поисковому запросу. Чтобы ты понимал, о чём я говорю — вспомни выпадающий список, который появляется, когда ты начинаешь вводить запрос в поисковой строке google:

 

При каждом нажатии клавиш поисковая выдача подстраивается под тебя, предлагая тебе наиболее релевантные варианты, которые ты возможно ищешь. Примерно тоже самое мне нужно было написать, когда я пару месяцев назад приступил к созданию одной большой и сложной формы, абсолютно ничего не зная о Vue. 

 

Помимо практики и разъяснения того, что недавно понял сам — я опишу некий «журнал разработки»: какими шагами я шёл, чтобы понять ту или иную вещь. В частности, покажу как вообще можно подступиться к Vue и начать что-то делать. Оговорюсь сразу — если среди подписчиков есть люди, знающие Vue и работающие с ним — буду рад любой критике и обратной связи в целом. А теперь поехали.

Первое, что следует открыть — документацию. Она переведена на русский, выстроена в режиме от простого к сложному и местами понятна :). Скажу честно — прочитав первые разделы и дойдя до компонентов я всё ещё мало представлял, как подступиться к созданию и как вообще должна выглядеть структура проекта.

Если теория (даже с отработанными примерами) тебе понятна, но четкой картины не выстраивается (как было у меня), то советую весьма неплохой видос — «Уроки VUE.JS учим за 1 час». Да, звучит как откровенный кликбейт с примесью чего-то в стиле «С++ за 20 минут», но это редкое исключение. Автор, хоть и идёт по стандартной документации, проделал большую работу: чего стоит анимация, которая помогает визуально уяснить материал и примеры, расширяющие стандартную доку.

На второй день, немного поигравшись с атрибутами, событиями, я посмотрел ещё несколько манов, и пробросом пользовательских событий в компоненты-родители (ты же прочитал документация и понимаешь о чём я говорю, да?), наступил момент узнать, как правильно строить архитектуру файлов проекта. Тут есть замечательный видос, где автор описывает такой инструмент, как VUE-cli: «Learn Vue.js (RU) — Vue CLI». Он небольшой и советую его посмотреть, прежде чем идти дальше, потому что через пару минут мы будем его использовать. К слову, это 3-ий или 4-ый ман автора в плейлисте по Vue. Первые 3 — введение и основы, которые стоит глянуть как закрепление документации и видео с часовым разъяснением Vue.js.

Давай развернём пустой проект, прежде чем идти дальше. Открываем IDE и далее по протоколу:

• Ставим (если это ещё не сделано) vue-cli:

npm install -g @vue/cli

• Разворачиваем новый проект:

vue create vue-auto-complete

Где vue-auto-complete — название директории, где будут размещены файлы с исходным кодом.

На вопрос

Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)

Отвечаем — Y, потому как мы не особо привередливые и нам без разницы, откуда vue будет подтягивать сорцы.

Затем нужно выбрать дефолтный вариант — использовать babel и eslint.

Затем — использовать npm или yarn. Я выбрал npm, ты же можешь выбрать что-то на свой вкус.

Теперь открой проект в IDE (у меня это PhpStorm) и увидишь следующую структуру проекта:

А теперь открой консоль и введи:

npm run build
npm run serve

Теперь самое время укрыться пледом, налить кофейка и посмотреть ещё 3 видоса, чтобы понять что такое компоненты и с чем их едят. Тема компонентов раскрывалась первый раз в документации, а теперь её нужно закрепить. Автор нам уже известен, собсно, привожу ссылки на видео:

• Learn Vue.js (RU) — Компоненты #1 — типы и методы создания
• Learn Vue.js (RU) — Компоненты #2 — передача и возврат параметров (props and emit)
• Learn Vue.js (RU) — Компоненты #3 — функции как параметры и объект Vue для хранения состояния

На тему компонентов у автора 5 уроков, но чтобы продолжить работу хватит и первых трёх.

Посмотрел? Едем дальше. А дальше обсудим, как должна работать авто-выпадашка. Как минимум — нужны API, которые будут искать данные в какой-либо таблице по фильтру. Фильтр — то, что пользователь вводит в input’е (в примере выше это была поисковая строка в google). Input мы можем связать через v-model с какой-либо переменной и повесить событие на onkeypress, к которому привязать некоторую функцию. В функции мы можем получить то, что пользователь только что ввёл в input, верно? Верно. А значит — можем отправить это значение на сервер, где в репозитории Symfony найдёт в базе наиболее похожие варианты и вернёт их в ответе. Этот ответ мы выведем как список под input’ом. Вот, в самом простом случае, и всё.

Давай сначала набросаем вёрстку. Как ты понял из видео выше, вся вёрстка описывается в разделе <template></template>, в файле компонента. Пока мы не будем создавать новые, а будем работать с теми, которые vue-cli для нас любезно подготовил. Переименуй компонент HelloWorld.vue в AutoComplete.vue, затем открывай и удаляй всё из секции template, script и style. Должен остаться пустой шаблон:

К слову, если посмотреть на то, что выводит localhost:8080, то мы увидим пустую страницу:

Так как обновление идёт автоматически.

Создаём input, который через директиву v-model связываем с переменной filter:

<template>
  <div class="autocomplete">
    <input
            type="text"
            v-model="filter"
    >
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      filter: null,
    }
  }
}
</script>

Как проверить, корректно ли всё связалось? Давай просто выведем filter перед input’ом:

<template>
  <div class="autocomplete">
    {{filter}}
    <input
            type="text"
            v-model="filter"
    >
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      filter: null
    }
  }
}
</script>

Теперь открой браузер и что-либо введи в input:

Вот и реактивность в действии. Круто, да?

Теперь давай через «@» навешаем событие на наш input и привяжем к нему функцию-обработчик:

<template>
  <div class="autocomplete">
    <input
            type="text"
            v-model="filter"
            @keypress="filterOnKeyPress"
    >
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      filter: null
    }
  },
  methods: {
    filterOnKeyPress() {
      console.log(this.filter);
    }
  }
}
</script>

Теперь любая строка, введённая в input будет печататься в консоли:

Причём печатается она по символам: одно нажатие на клавиатуру — одно срабатывание события. В следующих статьях я покажу, как оптимизировать этот процесс: мы познакомимся с библиотекой lodash и немного копнём в асинхронное программирование на es6.

По плану — мы выполнили половину задачи. Теперь в функции-обработчике теперь нужно отправлять запрос на сервер, получать данные и записывать их в какую-либо переменную, которую рендерить через v-for. Но об этом я расскажу завтра.

Кстати, если тебе интересно моё корявое объяснение всего вышепроисходящего — пиши, постараюсь изложить как можно подробнее. Хотя в материалах, приведённых выше, это всё уже есть.

Спасибо, что читаешь, друг. Надеюсь, что теперь статьи и заметки будут почти каждый день 🙂