VueJS - Инициализация поля формы taging, которое было загружено как часть шаблона или атрибута $ el?

Question

Я следую образцу, описанному в разделе official documentation загрузки изображений с использованием компонентов. Один из компонентов имеет поле формы. Мне нужно вызвать метод, называемый .tagsinput(), поскольку я использую TagsInput. Итак, что-то вроде $('#tags').tagsinput(). Вот упрощенная версия того, что я делаю:

CreateBoardForm = Vue.extend 
    template: "<input type='text' v-text='tags' id='tags'/>" 
    data: 
     tags: '' 
    ready: -> 
     // this is where I'm hoping to access 
     // tags and call $('#tags').tagsinput() on it 
     // However, this.$el and this.template are all undefined 
     // I was hoping to do something like this.$el.find('#tags').tagsinput() 

    Vue.component('CreateBoardForm', CreateBoardForm) 

    vue = new Vue(
    el: '#main', 
    data: 
     currentView: 'createBoardForm' 
    components: 
     createBoardForm: CreateBoardForm 
) 

Любая помощь на том, как я мог бы инициализировать эту форму поле будет весьма признателен.

Спасибо

Answer 1

ОК, я понял это. В принципе, вам нужно создать новый компонент, послушать вложенное событие, использовать рассчитанные свойства, а затем использовать тег , который станет ссылкой на ввод тегов. Я переключился с этой библиотеки тегов на другую, но идея такая же. Вот работа JSFiddle и ниже - код:

<div id="tags-input-example"> 
    <tags-input v-ref="twitterUsers"></tags-input> 
    <input type="button" v-on="click: onSubmit" value="Submit"/>   
</div> 

<script type="text/x-template" id="tags-input"> 
    <input type="text" /> 
</script> 

Vue.component('tags-input', { 
    template: "#tags-input", 
    attached: function() { 
     $(this.$el).find('input').tagsInput(); 
    }, 
    computed: { 
     tags: { 
      get: function() { 
       return $(this.$el).find('input').val(); 
      } 
     }  
    } 
}); 

vm = new Vue({ 
    el: '#tags-input-example', 
    methods: { 
     onSubmit: function(e) { 
      console.log(this.$.twitterUsers.tags); 
      alert("The tags are: " + this.$.twitterUsers.tags); 
     } 
    } 
});