在Vue.js中，我如何知道整个视图已经呈现，包括AJAX调用？

问题描述：

根据Vue.js API documentation使用nextTick()里面的mounted()会保证整个视图已经渲染，但我不确定它们在这种情况下是“渲染”的意思。在Vue.js中，我如何知道整个视图已经呈现，包括AJAX调用？

我试图整合intro.js库介绍Vue.js，但如果我用把introJs().start()的nextTick内类似如下：

mounted: function() { 
    this.$nextTick(function() { 
    // Code that supposedly will run only after the 
    // entire view has been rendered 
     introJs().start() 
    }) 
}

它好像DOM还没有完全准备好，introJs失败显示所有介绍步骤成功。

Reproduction link

我怎么能知道这一切是真的准备好了吗？有没有其他方法可以在Vue.js中启动introJs？

我怀疑文档是错的，必须有其他的事情发生。如果你可以创建一个展示问题的jsfiddle，我很乐意提供帮助。 –

@EricGuan我正在复制链接。谢谢 – tatsuhirosatou

@EricGuan复制链接准备就绪！ – tatsuhirosatou

答

问题是您正在使用v-if。如果条件为false，则html元素将不在文档中，这意味着introjs无法找到它。在浏览器开发工具中，如果您在v-if条件为false时查看组件，则会看到html注释。

简单的修复方法是使用v-show。这种方式元素将在文档中，introjs可以找到它，并且用户仍然不会看到它，因为v-show切换为display css属性。

虽然由于AJAX负载引入了滞后，但同样的问题仍然存在。我通过增加一个延迟来模拟。如果在ajax加载准备就绪之前在巡视中点击足够快，则介绍将显示在错误的位置。 – tatsuhirosatou

好吧，现在'已登录'不再合适。每个项目需要一个跟踪ajax状态的变量。 https://jsfiddle.net/eejn7p27/1/。一旦所有ajax完成，这将开始介绍。 –

在Vue.js中，我如何知道整个视图已经呈现，包括AJAX调用？

相关推荐