v-if 破坏 nuxt ssr

Question

如果我'cache-and-network'在 v-if 中使用从 apollo 获取的数据（fetchPolicy:），它会抛出 vue.runtime.esm.js:619 [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.

<template>
  <div
    <div v-if="test">
      {{ test }}
    </div>
  </div>
</template>

但如果我将它用作变量来渲染它就可以正常工作。

<template>
  <div>
    {{ test }}
  </div>
</template>

实际使用的数据是对象，我需要有条件地渲染并使用 v-if 传递给另一个组件。

我尝试过通过 get 获取数据、监视数据并手动设置它们，但最终一切都崩溃了。

关于评论：如果我控制台test数据，它将转到 ->true在服务器上 ->false在客户端上，然后true再次在客户端上，如果我test从中删除它v-if，则会： true在服务器上和true客户端上

这与结构无关，在实际项目中，它有一堆组件，如果数据未在条件下使用，它就可以正常工作

Answer 1

对于遇到同样问题的人，我已经通过cache-and-network安装后设置来修复它，并且一切正常。

mounted() {
  this.$apollo.queries.getCampaign.setOptions({
    fetchPolicy: 'cache-and-network',
  })
}