Nuxt：如何知道补水完成了？

Question

情况

我保存用户访问过的旅游页面，以便在用户返回网站时在主页上显示“最近访问过的旅游”。我用vuex-persistedstate 保存的参观过的旅行。

代码很简单：<TheVisitedTours v-show=toursRecentlyViewed.length" />

问题

当用户回来时，会出现下一个补水问题：

Parent:  <div style=​"display:​none;​" data-v-24f9a6f4>​…​</div>​ 

Mismatching childNodes vs. VNodes:  NodeList(3) [comment, text, comment] (5) [VNode, VNode, VNode, VNode, VNode]
 
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

很明显，SSR 没有关于 Visited tours 的信息，vuex-persistedstate 在水合完成之前恢复关于visited tours的信息。

如果我使用 v-show 而不是 v-if 我看到：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

我尝试将其包装到 <client-only>...</client-only> 中，但没有帮助。

我也试过用：

mounted () {
  this.isMounted = true
}

和

mounted () {
  window.onNuxtReady(() => {
    this.isMounted = true
  })
}

与

<TheVisitedTours v-if=isMounted && toursRecentlyViewed.length" />

但它也不起作用。

问题

有什么事件可以让我知道补水已经完成吗？如果没有，也许有人有任何解决方法的想法？

非常感谢。

Answer 1

找到解决方案。

我的初始代码使用vue-lazy-hydration

<LazyHydrate when-visible>
  <b-container>

    ......
  
    <client-only>
      <TheVisitedTours v-show=toursRecentlyViewed.length" />
    </client-only>
  </b-container>
</LazyHydrate>

删除LazyHydrate 后，<client-only> 修复了一个问题。