在 Vue 中使用富文本组件答案

【问题标题】：Using the Rich Text Component in Vue在 Vue 中使用富文本组件
【发布时间】：2019-08-28 15:33:23
【问题描述】：

所以我想使用文档中描述的富文本组件：

https://prismic.io/docs/vuejs/templating/rich-text

因此，我在导致错误的特定部分中的 HTML 如下所示：

  <template v-if="slice.slice_type === 'text'">
    <div>
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

现在在页面重新加载时显示正确的 HTML，但在 0.5 秒后它消失了，我在控制台中收到以下错误：

现在我不知道如何消除这些错误。特别是中间的 2。

【问题讨论】：

您的服务器 dom 与客户端 dom 不匹配。尝试将此插件仅用作客户端

标签： javascript vue.js nuxt.js prismic.io

【解决方案1】：

这个错误很可能是因为你传递了缺少必要的names 的对象而引发的。在传递道具之前尝试检查道具：

  <template v-if="slice.slice_type === 'text'">
    <div v-if="slice.primary && slice.primary.text" >
      <prismic-rich-text :field="slice.primary.text"/> 
    </div>
  </template>

希望对你有帮助

【讨论】：