VueJS - 템플릿 또는 $ 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

좋아요, 알아 냈습니다. 기본적으로 새 구성 요소를 만들고 연결된 이벤트를 수신하고 계산 된 속성을 사용한 다음 태그 입력에 대한 참조가되는 v-ref 태그를 사용해야합니다. 이 tagsinput 라이브러리에서 다른 라이브러리로 전환했지만, 아이디어는 같습니다. 다음은 작동 코드입니다. 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); 
     } 
    } 
});