[英]Vue run function after v-for finishes rendering
我正在根據 Vue.js 中的params
變量動態地在v-for
創建輸入字段。 輸入也是 Twitter 預輸入輸入,但它們需要在渲染后進行初始化。 我可以在看到它們已被渲染后手動調用typeaheadLoop()
,但我怎樣才能自動執行此操作?
我需要在v-for params
完成后運行 typeaheadLoop typeaheadLoop()
function,我該如何實現?
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
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.