我目前在Vue.js中有一个组件,该组件从Elasticsearch查询中获取数据并呈现如下列表:
<li v-for="country in countries">{{ country.key }}</li>
问题是我没有向人们展示完整的列表,而是向我显示了更多信息,并且只向人们展示了3个项目。要使用阅读更多功能,我首先需要等待Elasticsearch查询运行并且我的列表已完全呈现。
如何检查列表完全呈现的时间?我之前已经阅读过有关Vue.nextTick()的信息,但是当我阅读以下内容时,这确实不适合我的情况:
在修改了一些反应式后,可以立即使用nextTick
数据。
我还通过简单地在Vue.nextTick()中记录一条消息来进行尝试,但是它提供的速度更快,甚至还没有呈现我的列表。提示?
最佳答案
设置国家/地区变量后,您需要立即调用nextTick
。在弹性搜索查询的回调中,它看起来像:
this.countries = response.data;
Vue.nextTick(function(){
//list is rendered
});
nextTick
仅确保DOM已经响应了已经更新的数据。