我目前在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已经响应了已经更新的数据。

09-10 05:36
查看更多