Formatting HTTP HTML response in Vue.js can be achieved by utilizing various methods and techniques

I have a WordPress site and I'm trying to fetch a specific post by its ID. Currently, the content is being displayed successfully, but it's also showing HTML tags in the main output. Here is an example:

https://i.stack.imgur.com/f3pdq.png

Code using Vue JS:

<template lang="">
    <div>
        <h1>Single Post Page</h1>        
        <div v-if="postLoaded">
            {{ post.content.rendered }}
        </div>
        <p v-else>
            Please wait ...
        </p>        
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            postLoaded : false, 
            post : null,
        }
    },  
    mounted() {
        let postId = this.$route.params.id;
        axios.get('https://amarcourse.com/wp-json/wp/v2/posts/' + postId )
            .then((response) => {
                this.post = response.data;
                this.postLoaded = true;
            })
            .catch((error) => {
                console.log(error)
            })
            .finally(() => {

            });
    }
}
</script>

<style lang="">
    
</style> 

Answer №1

Consider using the v-html directive to properly display HTML content:

<template>
  <div>
    <h1>Post Details</h1>        
    <div v-if="loaded" v-html="post.content.rendered"></div>
    <p v-else>Loading ...</p>        
  </div>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to determine the length of an array in Vue.js due to property being undefined

Within my vue.js data structure, I have the following: data() { return { formData: new Form({ files:[], Count:5, .. } I am attempting to retrieve the length using the following code : <div class="image-input& ...

Managing iframes in React using reference methods

Trying to set the content of an iframe within a React component can be a bit tricky. There is a component that contains a handleStatementPrint function which needs to be called when the iframe finishes loading. The goal is to print the loaded iframe conten ...

Interactive Geography Selector

When updating your personal details on , you are required to choose your country first. Once the country is selected, the system automatically adjusts the city and/or state options based on that specific country's requirements. Can someone provide exa ...

The eternal Three.js animation that loops endlessly whenever it is clicked

The Objective My aim is to create a straightforward camera zoom in animation that increases the zoom level by a specific amount each time the button is clicked. The Current Status I have successfully implemented the animation using Three.js and linked i ...

Resolve problems with implementing dynamic routes in Next.js

I have been learning about Next.js and I am struggling with understanding how to set up dynamic routing. I have the following setup: https://i.stack.imgur.com/uBPdm.png https://i.stack.imgur.com/YYSxn.png "use client" import React from "reac ...

JavaScript's Ajax request seems to be stagnant and inactive

Having some difficulties with the code below. It triggers an alert correctly, but the ajax part doesn't seem to be functioning. No errors or indications of what's wrong. $(document).on('change', '.department_select', function ...

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

Using mongoose to execute a join operation

Currently, I have organized 2 collections named Dates and Streets. The goal is to query Streets using a parameter StreetName, find its unique ID, and then use that ID to query the other collection for dates that match. The route is configured as /wasteDa ...

Looking for advice on how to design a custom JavaScript widget?

I am currently working on a web application and I am in the process of developing a feedback form widget that users can easily embed on their websites. The data submitted through this widget will be securely stored within my web application. One important ...

Load Vue dynamically to implement reCAPTCHA script

I am looking for a way to dynamically load a script like recaptcha specifically within the Register.Vue / login.Vue component. <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer> </s ...

I'm having trouble sending registration emails through my server. What could be causing this issue?

Currently, I am in the process of developing a registration system that automatically sends an email with the user's username and password once they have successfully registered. The registration process functions smoothly up until the point where the ...

What is the best way to implement data validation for various input fields using JavaScript with a single function?

Users can input 5 numbers into a form, each with the same ID but a different name. I want to validate each input and change the background color based on the number entered - red for 0-5, green for 6-10. I wrote code to change the color for one input box, ...

Tips for setting up Reaction Roles in discord.js?

Having some trouble implementing this functionality, especially with my reaction role. Wondering if I am using the correct functions/methods. Any help would be greatly appreciated. New to discord bot development and might have a simple question, but any a ...

What is the best way to navigate through images only when hovering?

I have a website that showcases a collection of images in a creative mosaic layout. Upon page load, I assign an array of image links to each image div using data attributes. This means that every image in the mosaic has an associated array of image links. ...

AngularJS Error: The method serviceName.functionName() is not a valid function

I am trying to implement a function that will go back when the cancel button is clicked. Here is the view code: <div ng-controller="goodCtrl"> <button class="btn" ng-click="cancel()">Cancel</button> </div> And here is the Jav ...

Is there a way to split a JSON string into an array using JQuery?

I need help splitting all the values from a JSON format string into an array. [{ "sno": "1", "code": "bp150mb", "quantity": null, "name": "mudguard", "company": "bajaj", "vehicle": "pulsar", "brand": "1", "image": "N/A", "color": "Blac ...

Issue encountered with Vue.js build configuration not being loaded while running on the build test server

I am working on a Vue 2 project and facing an issue with loading configuration settings from a config.json file. My router\index.ts file has the line: Vue.prototype.$config = require('/public/config.json') The config.json file contains imp ...

Utilize Vue to fetch authenticated Laravel data for populating purposes

Is there a way to fill the auth()->user()->first_name or {{ optional(auth()->user()->first_name) }} in my blade template? Can I use vue.js file.js to populate user.first_name with the code below? var app = new Vue({ el: '#property-boo ...

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/ One of my goals is to customize the appearance of the messages, so that when a message is s ...

How many logical lines of code are in the Ubuntu operating system?

As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...