VueJS - 初始化作为模板或 $el 属性的一部分加载的 tagsinput 表单字段?
VueJS - Initializing a tagsinput form field that was loaded as part of template or $el attribute?
我正在遵循 official documentation of loading views using components. One of the components has a form field I need to have a method called .tagsinput()
called on since I'm using 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
)
任何有关如何初始化该表单字段的帮助将不胜感激。
谢谢
好的,我明白了。基本上,您必须创建一个新组件,监听附加事件,使用计算属性,然后使用 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);
}
}
});
我正在遵循 official documentation of loading views using components. One of the components has a form field I need to have a method called .tagsinput()
called on since I'm using 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
)
任何有关如何初始化该表单字段的帮助将不胜感激。
谢谢
好的,我明白了。基本上,您必须创建一个新组件,监听附加事件,使用计算属性,然后使用 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);
}
}
});