vue.js - v-if 破坏 nuxt ssr

Question

如果我在 v-if 中使用从 apollo 获取的数据 (fetchPolicy: 'cache-and-network')，它会抛出 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',
  })
}