问题描述
我正在基于 Vue.js 中的 v-for
变量在 params
中动态创建输入字段。输入也是 Twitter 预先输入,但它们需要在呈现后进行初始化。我可以在看到它们已呈现后手动调用 typeaheadLoop()
,但如何自动执行此操作?
我需要在 typeaheadLoop()
完成后运行 v-for params
函数,我该如何实现?
HTML:
<div v-for="item in params" :key="item">
<label class="col-form-label text-inverse-success">@{{ fromCamelToSentenceCase(item) }}</label>
<div class="typeahead">
<input v-bind:id="item + 'ParamInput'" type="text" class="form-control" :placeholder="'Enter ' + fromCamelToSentenceCase(item)"/>
</div>
</div>
JavaScript:
function typeaheadLoop() {
for(var i = 0; i < vueApp.params.length; i++) {
var param = vueApp.params[i];
if(!param.includes('date')) {
createTypeahead(param,vueApp.dataSource);
}
}
}
function createTypeahead(paramName,dataset) {
var hound = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,queryTokenizer: Bloodhound.tokenizers.whitespace,remote: {
cache: false,url: '/param/' + dataset + '?paramName=' + paramName + '&keyword=%QUERY',wildcard: '%QUERY'
}
});
$("#" + paramName + "ParamInput").typeahead({
highlight: true,minLength: 0,},{
name: 'suggestions',source: hound,limit: 10,display: function(data) {
return data;
},}
).bind('typeahead:select',function(ev,suggestion) {
console.log(suggestion);
});
}
解决方法
我认为 $nextTick 可能会有所帮助:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}