将 API 中的 JSON 替换为 Vue.js 应用中的 HTML

Question

我有一个简单的 Vite+Vue.js 项目，我在其中使用 REST API 和 [=33 从 headless-cms Wordpress 导入数据=].它应该获取并显示帖子的标题和内容（包括出现时的图像）。我被卡住了，因为页面上的所有数据都显示为 HTML，即它包含 HTML 个元素，但当然是 JSON。有什么方法可以将其转换为纯 HTML 吗？我试过用“replacer”方法过滤它，但对于所有元素和情况，它会花费很长时间。

Screenshot of how data display on page

我的组件模板：

<template>
<h1>Posts</h1>
<div v-for="post in posts" :key="post.id" class="posts">
    <h2> {{ post.title.rendered }} </h2>
    <div> {{ post.content.rendered }} </div>
</div>

我在该组件中的脚本：

<script>
export default {
    data() {
        return {
            posts: [],
            message: String,
        }
    },
    mounted() {
        fetch('https://my-url-here.com/wp-json/wp/v2/posts')
        .then(res => res.json())
        .then(data => this.posts = data)
        .then(err => console.log(err)) 
    }
}

</script>

Answer 1

只需使用v-html

<template>
<h1>Posts</h1>
<div v-for="post in posts" :key="post.id" class="posts">
    <h2> {{ post.title.rendered }} </h2>
    <div v-html="post.content.rendered"></div>
</div>

将 API 中的 JSON 替换为 Vue.js 应用中的 HTML

Replacing the JSON from API with HTML in the Vue.js app

html

javascript

json

vue.js

headless-cms