Tengo un proyecto simple de Vite+Vue.js en el que estoy importando datos de Wordpress headless-cms usando REST API y JSON. Debe tomar y mostrar los títulos y el contenido de las publicaciones (incluidas las imágenes cuando ocurren). Estoy atascado porque todos los datos en la página se muestran como HTML, es decir, contiene elementos HTML, pero por supuesto son JSON. ¿Hay alguna forma de convertirlo a HTML simple? Intenté filtrarlo con el método de "reemplazo", pero para todos los elementos y situaciones llevaría años.
Captura de pantalla de cómo se muestran los datos en la página
Mi plantilla de componentes:
<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>
Mi script en ese componente:
<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>
Solo usa 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>