javascript - v-for 完成渲染后的 Vue 运行函数

Question

我正在v-for基于paramsVue.js 中的变量动态地在 a 中创建输入字段。输入也是 Twitter typeahead 输入，但它们需要在呈现后进行初始化。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);
    });
}

标签： javascripthtmlvue.jsvuejs2twitter-typeahead

Answer 1

我认为 $nextTick 可能会有所帮助：

mounted: function () {


this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered


})

}