Как создать пользовательский выбранный список, используя Multiselect для Vue.js

Дамиан Дулиш, член команды Vue.js и автор Vue-Multiselect, говорит, что Vue-Multiselect - «наиболее полное решение для выбора Vue.js», и я должен с ним согласиться.

Недавно мне пришлось создать для нашего продукта функцию Fliplet, которая позволяла бы пользователям выбирать ресурсы для встраивания в свои приложения. Подобно тому, как CodePen делает это, пользователь может выбирать из списка предопределенных ресурсов и / или вводить текст для поиска ресурсов, доставляемых cdnjs.com.

Пример Vue-Multiselect

Имея в виду эту функциональность, а также учитывая, что наш продукт построен с использованием Vue.js, я начал поиск компонента выбора поля, созданного для Vue.js (я не хотел тратить время на создание своего собственного), и я нашел довольно много, я попробовал пару, пока я не попробовал Vue-Multiselect, и я был поражен возможностями. Вы можете проверить веб-сайт, но в основном это поле выбора, которое позволяет выбрать один или несколько элементов, поиск, теги и многое другое - поверьте мне, это действительно хорошо. Поэтому сегодня я решил создать быстрый учебник, который использует это поле выбора, и с небольшим количеством кода мы создадим собственный список выбранных ресурсов, загруженных с cdnjs.com.

Чего мы добьемся

Начиная

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

Вам понадобятся следующие ресурсы, установленные в вашем проекте:

  • Vue.js
  • Вью-Multiselect
  • Вью-ресурсов
  • Font Awesome

Установка Vue.js - ссылка здесь
NPM является рекомендуемым методом установки, но вы можете установить его другим способом.

npm установить vue --save

Установка Vue-Multiselect - ссылка здесь
NPM является рекомендуемым методом установки, но вы можете установить его другим способом.

npm установить vue-multiselect --save

Установка Vue-Resource - ссылка здесь
NPM является рекомендуемым методом установки, но вы можете установить его другим способом.

npm установить vue-ресурс --save

Установка Font Awesome - ссылка здесь
Загрузите файлы и добавьте их в свой проект. Это необязательно, в том числе потому, что я использовал в своем примере.

Теперь, когда у вас есть все компоненты, необходимые для этого урока, давайте приступим.

Создайте компонент Vue

Сначала мы собираемся настроить Vue и включить компонент Multiselect.

Вью

новое Vue ({
  компоненты: {
    Мультиселект: window.VueMultiselect.default
  },
  данные: {
    параметры: [],
    optionsProxy: []
  }
}). $ Крепление ( «# приложение»)

Теперь HTML, мы включим разметку для поля выбора Multiselect.

HTML

  

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

А пока позвольте мне объяснить наиболее важные из них:

 
  • options - содержит массив элементов для отображения, когда пользователи нажимают поле выбора
  • значение - это будет содержать выбранные элементы в массиве

Теперь, когда вы знаете назначение этих двух реквизитов, давайте взглянем на реквизит данных Vue. Вы можете видеть, что мы определили две переменные как пустые массивы:

 
-----
данные: {
  параметры: [],
  optionsProxy: []
}
  • options - это должен содержать массив элементов для отображения, когда пользователи нажимают поле выбора
  • optionsProxy - заполнит выбранными пользователем элементами

Опции не должны быть пустым массивом, однако в этом уроке мы будем заполнять его ресурсами cdnjs.com, поэтому пока мы будем держать его пустым.

Если вы следовали этому примеру, у вас должно получиться что-то вроде этого:

Создайте пользовательский список, используемый для отображения выбранных ресурсов.

Одна из наиболее ценных вещей Multiselect заключается в том, что список элементов может представлять собой массив объектов, и эти объекты могут содержать несколько ключей, которые можно использовать для отображения данных после того, как пользователь выбрал один.

Давайте посмотрим на разметку списка выбранных ресурсов.