Компонент добавления тегов в Vue.js

Представим, что у нас есть задача сделать компонент в виде формы ввода тегов. Не буду вдаваться в подробности, но скажу, что компонент может быть записан в отдельные файлы component.js и component.css  и подключить обычным образом к странице. В Cordova, к примеру, пока это единственный способ использовать внешние компоненты, загружаемые в виде отдельных модулей, потому что нет поддержки import

Чтобы иметь обратную связь из модуля в главное приложение Vue.js нам необходимо установить событие обновления  тегов, потому что нам необходимо заполучить эти введенные, чтобы потом хранить их в БД. Решением этого является добавление в методе watch модуля наблюдение для параметра tags:

tags() {
    this.$root.$emit('updateTags',this.elementId, this.tags, this.tagBadges, this.existingTags);
}

Т.е., модуль будет вызывать метод в главном приложении, чтобы ему передавать обновленные данные состояния поля ввода тегов. В главном приложении в методе create создаем слушатель события для метода:

this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
    //...
});

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

<tags-input element-id="fieldGenreTags"
            :existing-tags="genreTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldSkillTags"
            :existing-tags="skillTags"
            :typeahead="true">
</tags-input>
<tags-input element-id="fieldImageTags"
            :existing-tags="imageTags"
            :typeahead="true">
</tags-input>
this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
   //
   var tagObj = {};
   tags.forEach(function(item, index, tags){
        tagObj[item] = badges[index];
   });
   //
   if("fieldGenreTags"==fieldName+"") this.curGenreTags = tagObj;
   if("fieldSkillTags"==fieldName+"") this.curImageTags = tagObj;
   if("fieldImageTags"==fieldName+"") this.curSkillTags = tagObj;
   //
   console.log("fieldGenreTags");
   console.log(this.curGenreTags);
   console.log("fieldSkillTags");
   console.log(this.curImageTags);
   console.log("fieldImageTags");
   console.log(this.curSkillTags);
})

Т.е., на странице для поля мы определяем для него ID, а в методе мы по этому ID разграничиваем получаемые данные.

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...