Javascript VueJS-初始化作为模板或$el属性的一部分加载的标记输入表单字段？

我遵循使用组件加载视图中描述的模式。其中一个组件有一个表单字段，我需要一个名为

.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
  )

CreateBoardForm=Vue.extend
模板：“”
数据：
标记：“”
就绪：->
//这是我希望访问的地方
//标记并在其上调用$（'#tags'）.tagsinput（）
//但是，此.el和此.template都未定义
//我希望做类似的事情。$el.find（“#tags”）.tagsinput（）
组件（'CreateBoardForm'，CreateBoardForm）
vue=新的vue(
el:“#main”，
数据：
currentView:“createBoardForm”
组件：
createBoardForm:createBoardForm
)

如果您能帮助我初始化表单字段，我将不胜感激

---

谢谢你

好的，我想好了。基本上，您必须创建一个新组件，侦听附加的事件，使用计算属性，然后使用

v-ref

标记，该标记将成为对标记输入的引用。我从这个标签库切换到另一个标签库，但想法是一样的。这是一个工作代码，下面是代码：

<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);
        }
    }
});

Vue.组件（'tags-input'{
模板：“#标签输入”，
附：函数（）{
$（this.$el）.find（'input'）.tagsInput（）；
},
计算：{
标签：{
get:function（）{
返回$（this.$el）.find（'input'）.val（）；
}
}    
}
});
vm=新的Vue({
el:“#标记输入示例”，
方法：{
提交人：函数（e）{
log（this.$.twitterUsers.tags）；
警报（“标记为：“+this.$.twitterUsers.tags”）；
}
}
});