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

好的，我想通了。基本上，您必须创建一个新组件，聆听附加事件，使用计算出的属性，然后使用标签变量来引用标签输入。我从这个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); 
     } 
    } 
});