PrismicDOM.RichText 在 v-for 里面

Question

重写了这个问题，因为不清楚。

我正在使用 Prismic，我已经能够在我的 Nuxt 项目中使用 prismic-javascript 将博客文章拉到页面上。

这是我目前拥有的：

  <section v-for="(post, i) in blogPosts" :key="i">
    {{ blogPosts[i].data.post_title[0].text }}
    {{ blogPosts[i].data.post_content[0].text }}
    <img :src="blogPosts[i].data.post_image.url" :width="blogPosts[i].data.post_image.dimensions.width">
  </section>

但是，我不确定如何将 Prismic RichText 渲染字符串放入 v-for，如下所示：

PrismicDOM.RichText.asHtml(blogPosts[i].data.post_content, linkResolver, htmlSerializer)

我可以在 v-for 之外创建一个变量，即使 - 这可能是 一个单独的问题 - 我得到了所有 html 呈现为普通文本，而不是标签。

我关注了 this "tutorial"，但尽管 async/await 我也没有从博客中获取更新的内容（也许我也遗漏了一些内容）

这是获取帖子的其余代码：

async asyncData() {
const api = await Prismic.getApi(apiEndpoint, { accessToken: apiToken })
let blogPosts = {}
const response = await api.query(
  Prismic.Predicates.at('document.type', 'blog-post')
)
blogPosts = response.results
)
return {
  blogPosts
}

}

感谢您的回答，希望它也能帮助/澄清其他人。

Answer 1

我认为代码中有错误。你能更新它并把这个：

blog_post = results.results[0];
const header = PrismicDom.RichText.asText(blog_post.data.blog_post_title);
const content = PrismicDom.RichText.asText(blog_post.data.blog_content);

我测试了一下，应该没问题！

PrismicDOM.RichText 在 v-for 里面

PrismicDOM.RichText inside v-for

vue.js

prismic.io

nuxt.js