javascript - 在 Vue 中使用富文本组件

Question

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

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

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

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

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

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

Answer 1

最有可能抛出错误是因为您传递的 Object 缺少 required 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>

希望这可以帮助